10
Tôi đang sử dụng số lvlDragDrop plugin này. Nó không hoạt động trên nền tảng di động. Trên github họ đã thêm issue này. Nhưng tôi vẫn không có may mắn.Kéo và thả góc không hoạt động trên thiết bị di động
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);
}
}
}]);
Jaquen nói là đúng, nó sẽ không hoạt động trên màn hình cảm ứng –