如何防止从 dropBox 将添加的拖动项返回到表中？表中的 Y 应仅从 dropBox 中获取 Y，与 X 相同
这里的 Dragular 文档有“nameSpace”，但在这种情况下不适合 http://luckylooke.github.io/dragular/#/docs/exampleScrollingDrag
这是一个工作示例
var app = angular.module('myApp', ["dragularModule"]);
app.controller('myCtrl', ['$scope', '$element', 'dragularService', function ($scope, $element, dragularService) {
$scope.rateTab = 'tab1';
$scope.setTab = function(newTab){
$scope.rateTab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.rateTab === tabNum;
};
$scope.allRates = {
tab1: [
{"payout": "80%", "expiry": "17:20", "type": "X", "asset": "100", "rate": "42.00"},
{"payout": "80%", "expiry": "17:20", "type": "X", "asset": "100", "rate": "42.00"},
{"payout": "80%", "expiry": "17:20", "type": "X", "asset": "100", "rate": "42.00"},
{"payout": "80%", "expiry": "17:20", "type": "X", "asset": "100", "rate": "42.00"},
{"payout": "80%", "expiry": "17:20", "type": "X", "asset": "100", "rate": "42.00"},
{"payout": "80%", "expiry": "17:20", "type": "X", "asset": "100", "rate": "42.00"}
],
tab2: [
{"payout": "20%", "expiry": "17:20", "type": "Y", "asset": "100", "rate": "42.00"},
{"payout": "20%", "expiry": "17:20", "type": "Y", "asset": "100", "rate": "42.00"},
{"payout": "20%", "expiry": "17:20", "type": "Y", "asset": "100", "rate": "42.00"},
{"payout": "20%", "expiry": "17:20", "type": "Y", "asset": "100", "rate": "42.00"},
{"payout": "20%", "expiry": "17:20", "type": "Y", "asset": "100", "rate": "42.00"}
],
dropBox: [
{"payout": "20%", "expiry": "17:20", "type": "Y", "asset": "100", "rate": "42.00"},
{"payout": "80%", "expiry": "17:20", "type": "X", "asset": "100", "rate": "42.00"},
{"payout": "20%", "expiry": "17:20", "type": "Y", "asset": "100", "rate": "42.00"},
{"payout": "80%", "expiry": "17:20", "type": "X", "asset": "100", "rate": "42.00"}
]
};
var currenciesRate = document.querySelector('#tab1');
var stocksRate = document.querySelector('#tab2');
var pieBox = document.querySelector('#dropBox');
dragularService.cleanEnviroment();
dragularService([currenciesRate], {
nameSpace: 'tab1',
containersModel: [$scope.allRates.tab1],
revertOnSpill: true,
scope: $scope
});
dragularService([stocksRate], {
nameSpace: 'tab2',
containersModel: [$scope.allRates.tab2],
revertOnSpill: true,
scope: $scope
});
dragularService([pieBox], {
nameSpace: ['tab1', 'tab2'],
containersModel: [$scope.allRates.dropBox],
revertOnSpill: true,
scope: $scope
});
$scope.$on('dragulardrop', function (el, target) {
console.log(target);
});
}]);.box{
display: inline-block;
vertical-align: top;
background: #aeaeae;
}
.box table{
border-collapse: collapse;
}
.box table td, .box table th{
padding: 10px;
}
.box table tr:nth-child(even){
background: #cacaca;
}
#dropBox{
display: inline-block;
vertical-align: top;
width: 188px;
margin: 0 0 0 50px;
border: 1px solid lightblue;
}
#dropBox h2{
text-align: center;
}
#dropBox div{
margin: 10px 0;
background: gainsboro;
padding: 20px 0;
text-align: center;
}
#dropBox div b{
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="myCtrl">
<div class="box">
<button ng-click="setTab('tab1')">tab1</button>
<button ng-click="setTab('tab2')">tab2</button>
<table ng-show="isSet('tab1')">
<thead>
<tr>
<th>Payout</th>
<th>Asset</th>
<th>Type</th>
</tr>
</thead>
<tbody id="tab1">
<tr ng-repeat="rate in allRates.tab1">
<td>{{rate.payout}}</td>
<td>{{rate.asset}}</td>
<td style="color: red;">{{rate.type}}</td>
</tr>
</tbody>
</table>
<table ng-show="isSet('tab2')">
<thead>
<tr>
<th>Payout</th>
<th>Asset</th>
<th>Type</th>
</tr>
</thead>
<tbody id="tab2">
<tr ng-repeat="rate in allRates.tab2">
<td>{{rate.payout}}</td>
<td>{{rate.asset}}</td>
<td style="color: red;">{{rate.type}}</td>
</tr>
</tbody>
</table>
</div>
<div id="dropBox">
<h2>DropBox</h2>
<div ng-repeat="rate in allRates.dropBox">
<span>{{rate.payout}}</span>
<span><b>{{rate.type}}</b></span>
<span>{{rate.expiry}}</span>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<!--dragular.min.js couse this not work https://raw.githubusercontent.com/luckylooke/dragular/master/dist/dragular.min.js-->
<script>
!function e(r,t,n){function o(a,l){if(!t[a]){if(!r[a]){var c="function"==typeof require&&require;if(!l&&c)return c(a,!0);if(i)return i(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var s=t[a]={exports:{}};r[a][0].call(s.exports,function(e){var t=r[a][1][e];return o(t?t:e)},s,s.exports,e,r,t,n)}return t[a].exports}for(var i="function"==typeof require&&require,a=0;a<n.length;a++)o(n[a]);return o}({1:[function(e,r,t){"use strict";var n=e("./dragularModule");n.directive("dragular",["dragularService",function(e){return{restrict:"A",link:function(r,t,n){function o(e){try{return JSON.parse(e)}catch(r){return void 0}}var i=r.$eval(n.dragular)||o(n.dragular)||{};n.dragularModel?i=angular.extend({containersModel:r.$eval(n.dragularModel)},i):i&&i.containersModel&&"string"==typeof i.containersModel&&(i.containersModel=r.$eval(i.containersModel)),e(t[0],i)}}}])},{"./dragularModule":2}],2:[function(e,r,t){"use strict";r.exports=angular.module("dragularModule",[]),{dragularDirective:e("./dragularDirective.js"),dragularService:e("./dragularService.js")}},{"./dragularDirective.js":1,"./dragularService.js":3}],3:[function(e,r,t){"use strict";var n=e("./dragularModule");n.factory("dragularService",["$rootScope",function(e){function r(e,r,t,n){var o={mouseup:"touchend",mousedown:"touchstart",mousemove:"touchmove"},i=angular.element(e);o[t]&&i[r](o[t],n),i[r](t,n)}function t(){return!1}function n(){return!0}function o(e){return e.width||e.right-e.left}function i(e){return e.height||e.bottom-e.top}function a(){return{}}function l(e){function r(){var r=e;do r=r.nextSibling;while(r&&1!==r.nodeType);return r}return e.nextElementSibling||r()}function c(e){return"object"==typeof HTMLElement?e instanceof HTMLElement:e&&"object"==typeof e&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName}function u(e){var r=y.classesCache[e];return r?r.lastIndex=0:y.classesCache[e]=r=new RegExp("(?:^|\\s)"+e+"(?:\\s|$)","g"),r}function s(e,r){var t=e.className;t.length?u(r).test(t)||(e.className+=" "+r):e.className=r}function d(e,r){e.className=e.className.replace(u(r)," ").trim()}function m(e){return e.targetTouches&&e.targetTouches.length?e.targetTouches[0]:e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e}function f(e,r){var t=m(r),n={pageX:"clientX",pageY:"clientY"};return e in n&&!(e in t)&&n[e]in t&&(e=n[e]),t.type.indexOf("touch")<0?t[e]:t.type.indexOf("end")>-1?void 0:t.originalEvent.touches[0][e.replace("client","page")]}function g(e){if(void 0!==e.buttons)return e.buttons;if(void 0!==e.which)return e.which;var r=e.button;return void 0!==r?1&r?1:2&r?3:4&r?2:0:void 0}function p(e){return"INPUT"===e.tagName||"TEXTAREA"===e.tagName||"SELECT"===e.tagName}function v(e,r){return Array.prototype.indexOf.call(angular.element(r).children(),e)}function h(e,r,t){e&&(y.extra=t,e.dispatchEvent?e.dispatchEvent(r):e.fireEvent("on"+r.eventType,r))}var y={classesCache:{},containersCtx:{},containers:{},mirror:null,source:null,item:null,copy:null,sourceItem:null,sourceModel:null,target:null,targetCtx:null,targetModel:null,lastDropTarget:null,offsetX:null,offsetY:null,moveX:null,moveY:null,offsetXr:null,offsetYb:null,clientX:null,clientY:null,mirrorWidth:null,mirrorHeight:null,initialSibling:null,currentSibling:null,initialIndex:null,currentIndex:null,isContainerModel:null,dragOverEvents:{},lastElementBehindCursor:null,grabbed:null},x=function(u,m){function x(e,r){return Array.isArray(e)?e:e.length?Array.prototype.slice.call(e,r):[e]}function E(r){e.$applyAsync(function(){var e=Array.isArray(r)?r:x(r);e.forEach(function(e){angular.forEach(ne.nameSpace,function(r){var t;t=y.containers[r].indexOf(e),y.containers[r].splice(t,1),y.containersCtx[r].splice(t,1)})})})}function b(e){var t=e?"off":"on";r(re,t,"mouseup",$),u.forEach(function(e){r(e,"on","mousedown",Y)})}function M(e){var t=e?"off":"on";r(re,t,"mousemove",O)}function C(e){var t=e?"off":"on";r(re,t,"selectstart",X),r(re,t,"click",X),r(re,t,"touchmove",X)}function S(){b(!0),E(u),$({})}function X(e){y.grabbed&&e.preventDefault()}function Y(e){if(e=e||window.event,y.moveX=e.clientX,y.moveY=e.clientY,1===g(e)&&!e.metaKey&&!e.ctrlKey){var r=T(e.target);r&&r.item&&(y.grabbed=r,M(),"mousedown"===e.type&&(p(r.item)?r.item.focus():e.preventDefault()))}}function O(e){if(y.grabbed&&!oe.dragging){if(0===g(e))return void $({});if(e.clientX!==y.moveX||e.clientY!==y.moveY){if(ne.ignoreInputTextSelection){var r=f("clientX",e),t=f("clientY",e),n=document.elementFromPoint(r,t);if(p(n))return}var o=y.grabbed;if(M(!0),C(),A(),w(o),!ne.direction){var i=y.sourceItem.parentElement,a=i.offsetHeight,l=i.offsetWidth,c=y.sourceItem.clientHeight,u=y.sourceItem.clientWidth;ne.direction=l/u>a/c?"horizontal":"vertical"}var d=Q(y.sourceItem);y.offsetX=f("pageX",e)-d.left,y.offsetY=f("pageY",e)-d.top,y.clientX=f("clientX",e),y.clientY=f("clientY",e),ne.boundingBox&&(y.offsetXr=f("pageX",e)-d.right,y.offsetYb=f("pageY",e)-d.bottom),e.preventDefault(),s(y.item,ne.classes.transit),U(),y.mirror.style.left=y.clientX-y.offsetX+"px",y.mirror.style.top=y.clientY-y.offsetY+"px",q(e)}}}function T(e){if(!oe.dragging||!y.mirror){for(var r=e;e.parentElement&&!Z(e.parentElement);){if(ne.invalid(e,r))return;if(e=e.parentElement,!e)return}var t=e.parentElement;if(t&&!ne.invalid(e,r)&&ne.moves(e,t,r,l(e)))return{item:e,source:t}}}function I(e){var r=T(e);r&&w(r)}function w(e){y.sourceItem=y.item=e.item,y.source=e.source,y.initialSibling=y.currentSibling=l(e.item),J(e.item,e.source)?(y.item=e.item.cloneNode(!0),y.copy=!0,ne.scope&&ne.scope.$emit("dragularcloned",y.item,e.item)):y.copy=!1;var r=u.indexOf(e.source);return y.sourceModel=ne.containersModel[r],y.initialIndex=v(e.item,e.source),oe.dragging=!0,ne.scope&&ne.scope.$emit("dragulardrag",y.sourceItem,y.source),!0}function B(){return!1}function A(){oe.dragging&&y.item&&D(y.item,y.item.parentElement)}function N(){y.grabbed=!1,M(!0),C(!0)}function $(e){if(N(),oe.dragging){e=e||window.event,y.clientX=f("clientX",e),y.clientY=f("clientY",e);var r=V(y.mirror,y.clientX,y.clientY),t=R(r,y.clientX,y.clientY);t&&(y.copy&&ne.copySortSource||!y.copy||t!==y.source)?D(y.item,t):ne.removeOnSpill?H():j(),y.target=null,y.lastElementBehindCursor&&h(y.lastElementBehindCursor,y.dragOverEvents.dragularrelease,r),ne.scope&&ne.scope.$emit("dragularrelease",y.item,y.source)}}function D(r,t){function n(){ne.scope&&(L(t)?ne.scope.$emit("dragularcancel",r,y.source,y.sourceModel,y.initialIndex):ne.scope.$emit("dragulardrop",r,t,y.source,y.sourceModel,y.initialIndex,y.targetModel))}if(y.copy&&ne.copySortSource&&t===y.source&&r.parentElement.removeChild(y.sourceItem),y.sourceModel&&!L(t)){var o=r,i=v(o,t);e.$applyAsync(function(){t===y.source?y.sourceModel.splice(i,0,y.sourceModel.splice(y.initialIndex,1)[0]):(y.dropElmModel=y.copy?angular.copy(y.sourceModel[y.initialIndex]):y.sourceModel[y.initialIndex],y.targetModel=y.isContainerModel?y.isContainerModel:y.targetCtx.m,t.removeChild(o),y.copy||y.sourceModel.splice(y.initialIndex,1),y.targetModel.splice(i,0,y.dropElmModel)),r.parentElement&&r.parentElement.removeChild(r),n(),k()})}else n(),k()}function H(){if(oe.dragging){var r=y.item.parentElement;r&&r.removeChild(y.item),y.sourceModel&&e.$applyAsync(function(){y.sourceModel.splice(y.initialIndex,1),k()}),ne.scope&&ne.scope.$emit(y.copy?"dragularcancel":"dragularremove",y.item,r,y.sourceModel,y.initialIndex),y.sourceModel||k()}}function j(e){if(oe.dragging){var r=arguments.length>0?e:ne.revertOnSpill,t=y.item.parentElement,n=L(t);n||y.copy||!r||y.source.insertBefore(y.item,y.initialSibling),!y.sourceModel||y.copy||r?ne.scope&&(n||r)&&ne.scope.$emit("dragularcancel",y.item,y.source):D(y.item,t),(!y.sourceModel||y.copy||r||n)&&k()}}function k(){N(),z(),y.item&&d(y.item,ne.classes.transit),oe.dragging=!1,ne.removeOnSpill===!0&&P(),ne.scope&&(y.lastDropTarget&&ne.scope.$emit("dragularout",y.item,y.lastDropTarget,y.source),ne.scope.$emit("dragulardragend",y.item)),y.source=y.item=y.sourceItem=y.initialSibling=y.currentSibling=y.sourceModel=null,y.initialIndex=y.currentIndex=y.lastDropTarget=y.isContainerModel=y.targetModel=null,y.dropElmModel=y.targetCtx=y.copy=y.moveX=y.moveY=null}function L(e,r){var t=r||(y.mirror?y.currentSibling:l(y.item));return e===y.source&&t===y.initialSibling}function R(e,r,t){function n(){var n=!1;if(Z(o)){for(var i=K(o,e),a=_(o,i,r,t),l=L(o,a),c=ne.nameSpace.length;c--;){if(-1!==y.containers[ne.nameSpace[c]].indexOf(o)){y.targetCtx=y.containersCtx[ne.nameSpace[c]][y.containers[ne.nameSpace[c]].indexOf(o)];break}y.targetCtx||(y.targetCtx=y.containersCtx.dragularCommon[y.containers.dragularCommon.indexOf(o)])}n=l||y.targetCtx.o.accepts(y.item,o,y.source,a,y.sourceModel,y.initialIndex)&&ne.canBeAccepted(y.item,o,y.source,a,y.sourceModel,y.initialIndex),y.target!==o&&(y.target=o)}return n}for(var o=e;o&&!n();)o=o.parentElement;return o}function q(e){function r(e){ne.scope&&ne.scope.$emit("dragular"+e,y.item,y.lastDropTarget,y.source),ne.removeOnSpill===!0&&("over"===e?W():P())}function t(){m&&r("over")}function n(){y.lastDropTarget&&r("out")}if(y.mirror){e=e||window.event,y.clientX=f("clientX",e),y.clientY=f("clientY",e);var o,i,a,c=y.clientX-y.offsetX,u=y.clientY-y.offsetY;ne.boundingBox&&(o=f("pageX",e),i=f("pageY",e),a=Q(ne.boundingBox)),ne.lockY||(!ne.boundingBox||o>a.left+y.offsetX&&o<a.right+y.offsetXr?y.mirror.style.left=c+"px":ne.boundingBox&&(y.mirror.style.left=o<a.left+y.offsetX?y.clientX-(o-a.left)+"px":y.clientX-y.mirrorWidth-(o-a.right)+"px")),ne.lockX||(!ne.boundingBox||i>a.top+y.offsetY&&i<a.bottom+y.offsetYb?y.mirror.style.top=u+"px":ne.boundingBox&&(y.mirror.style.top=i<a.top+y.offsetY?y.clientY-(i-a.top)+"px":y.clientY-y.mirrorHeight-(i-a.bottom)+"px"));var s=V(y.mirror,y.clientX,y.clientY),d=R(s,y.clientX,y.clientY),m=d!==y.lastDropTarget;if(s!==y.lastElementBehindCursor&&(h(s,y.dragOverEvents.dragularenter,!!d),y.lastElementBehindCursor&&h(y.lastElementBehindCursor,y.dragOverEvents.dragularleave,s),y.lastElementBehindCursor=s),m&&(n(),y.lastDropTarget=d,t()),d===y.source&&y.copy&&!ne.copySortSource)return void(y.item.parentElement&&y.item.parentElement.removeChild(y.item));var g,p=K(d,s);if(null!==p)g=_(d,p,y.clientX,y.clientY);else{if(ne.revertOnSpill!==!0||y.copy)return void(y.copy&&null!==y.item.parentElement&&y.item.parentElement.removeChild(y.item));g=y.initialSibling,d=y.source}(null===g||g!==y.item&&g!==l(y.item)&&g!==y.currentSibling)&&(y.currentSibling=g,d.insertBefore(y.item,g),ne.scope&&ne.scope.$emit("dragularshadow",y.item,d))}}function W(){d(y.item,ne.classes.hide)}function P(){oe.dragging&&s(y.item,ne.classes.hide)}function F(e){if(y.target){var r=y.target.scrollTop;y.target.scrollTop+=e.deltaY,r!==y.target.scrollTop&&(e.stopPropagation(),e.preventDefault())}}function U(){if(!y.mirror){var e=y.sourceItem.getBoundingClientRect();y.mirror=y.sourceItem.cloneNode(!0),y.mirrorWidth=e.width,y.mirrorHeight=e.height,y.mirror.style.width=o(e)+"px",y.mirror.style.height=i(e)+"px",d(y.mirror,ne.classes.transit),s(y.mirror,ne.classes.mirror),ne.mirrorContainer.appendChild(y.mirror),r(re,"on","mousemove",q),s(ee,ne.classes.unselectable),r(y.mirror,"on","wheel",F),ne.scope&&ne.scope.$emit("dragularcloned",y.mirror,y.sourceItem)}}function z(){y.mirror&&(d(ee,ne.classes.unselectable),r(re,"off","mousemove",q),r(y.mirror,"off","wheel",F),y.mirror.parentElement.removeChild(y.mirror),y.mirror=null)}function K(e,r){for(var t=r;t!==e&&t.parentElement!==e;)t=t.parentElement;return t===re?null:t}function _(e,r,t,n){function a(){var r,o,i,a=e.children.length;for(r=0;a>r;r++){if(o=e.children[r],i=o.getBoundingClientRect(),s&&i.left>t)return o;if(!s&&i.top>n)return o}return null}function c(){var e=r.getBoundingClientRect();return u(s?t>e.left+o(e)/2:n>e.top+i(e)/2)}function u(e){return e?l(r):r}var s="horizontal"===ne.direction,d=r!==e?c():a();return d}function J(e,r){return"boolean"==typeof ne.copy?ne.copy:ne.copy(e,r)}function G(e,r){return"undefined"!=typeof window[r]?window[r]:re.clientHeight?re[e]:ee[e]}function Q(e){var r=e.getBoundingClientRect(),t=G("scrollTop","pageYOffset"),n=G("scrollLeft","pageXOffset");return{left:r.left+n,right:r.right+n,top:r.top+t,bottom:r.bottom+t}}function V(e,r,t){var n,o=e||{},i=o.className;return o.className+=" "+ne.classes.hide,n=document.elementFromPoint(r,t),o.className=i,n}1!==arguments.length||Array.isArray(u)||angular.isElement(u)||u[0]||"string"==typeof u?"string"==typeof u&&(u=document.querySelectorAll(u)):(m=u,u=[]);var Z,ee=document.body,re=document.documentElement,te={mirror:"gu-mirror",hide:"gu-hide",unselectable:"gu-unselectable",transit:"gu-transit"},ne={dragOverEventNames:["dragularenter","dragularleave","dragularrelease"],classes:te,containers:!1,moves:n,accepts:n,canBeAccepted:n,isContainer:t,copy:!1,invalid:B,revertOnSpill:!1,removeOnSpill:!1,lockX:!1,lockY:!1,boundingBox:!1,containersModel:!1,isContainerModel:a};c(ne.boundingBox)||(ne.boundingBox=null),m&&m.classes&&(angular.extend(te,m.classes),angular.extend(m.classes,te)),angular.extend(ne,m),ne.mirrorContainer||(ne.mirrorContainer=document.body),u=ne.containers||u||[],u=x(u),ne.containersModel=ne.containersModel?Array.isArray(ne.containersModel[0])?ne.containersModel:[ne.containersModel]:[],ne.nameSpace||(ne.nameSpace=["dragularCommon"]),Array.isArray(ne.nameSpace)||(ne.nameSpace=[ne.nameSpace]),ne.nameSpace.forEach(function(e){y.containers[e]||(y.containers[e]=[],y.containersCtx[e]=[]);for(var r=u.length,t=y.containers[e].length,n=0;r>n;n++)y.containers[e][n+t]=u[n],y.containersCtx[e][n+t]={o:ne,m:ne.containersModel[n]}}),b(),angular.forEach(ne.dragOverEventNames,function(e){document.createEvent?(y.dragOverEvents[e]=document.createEvent("HTMLEvents"),y.dragOverEvents[e].initEvent(e,!0,!0)):(y.dragOverEvents[e]=document.createEventObject(),y.dragOverEvents[e].eventType=e)}),Z=function(e){for(var r=ne.nameSpace.length;r--;)if(-1!==y.containers[ne.nameSpace[r]].indexOf(e))return!0;return ne.isContainer(e)?(y.isContainerModel=ne.isContainerModel(e),!0):(y.isContainerModel=null,!1)};var oe={containers:y.containers,containersCtx:y.containersCtx,isContainer:Z,start:I,end:A,cancel:j,remove:H,destroy:S,dragging:!1};return oe};return x.cleanEnviroment=function(){y.classesCache={},y.containersCtx={},y.containers={},y.mirror=void 0},x.shared=y,x}])},{"./dragularModule":2}]},{},[2]); //# sourceMappingURL=dragular.min.js.map
</script>
</body>
</html>