我正在使用这个lvlDragDrop插件。它在移动平台上无法正常工作。
在github上,他们已经添加了这个问题。但是我仍然没有运气。
Github演示
HTML
<div ng-controller="ddController" style="margin-top:50px;">
<div class="row">
<div class="col-md-1 col-md-offset-1">
<p>Click and drag a color onto the grid to the right</p>
<div class="peg green" x-lvl-draggable="true" data-color="green">Green</div>
<div class="peg red" x-lvl-draggable="true" data-color="red">Red</div>
<div class="peg blue" x-lvl-draggable="true" data-color="blue">Blue</div>
<div class="peg black" x-lvl-draggable="true" data-color="black">Black</div>
<div class="peg grey" x-lvl-draggable="true" data-color="grey">Grey</div>
</div>
<div class="col-md-10">
<div ng-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
<span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" x-lvl-drop-target="true" x-on-drop="dropped(dragEl, dropEl)"></span>
</div>
</div>
</div>
</div>
JS
angular.module('ddApp', ['lvl.directives.dragdrop']) // register the directive with your app module
.controller('ddController', ['$scope' , function($scope){
$scope.dropped = function(dragEl, dropEl) { // function referenced by the drop target
//this is application logic, for the demo we just want to color the grid squares
//the directive provides a native dom object, wrap with jqlite
var drop = angular.element(dropEl);
var drag = angular.element(dragEl);
//clear the previously applied color, if it exists
var bgClass = drop.attr('data-color');
if (bgClass) {
drop.removeClass(bgClass);
}
//add the dragged color
bgClass = drag.attr("data-color");
drop.addClass(bgClass);
drop.attr('data-color', bgClass);
//if element has been dragged from the grid, clear dragged color
if (drag.attr("x-lvl-drop-target")) {
drag.removeClass(bgClass);
}
}
}]);