10
Ich verwende diese lvlDragDrop plugin. Es funktioniert nicht auf der mobilen Plattform. Auf github haben sie diese issue hinzugefügt. Aber ich habe immer noch kein Glück.eckig Drag and Drop funktioniert nicht auf Handy
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 sagte, es ist nicht in Touchscreen arbeiten –