http://jsfiddle.net/asutosh/82qum/
<div ng-app='myApp'>
<div ng-controller="myCtrl">
<table border="4">
<thead>
<th ng-repeat="hd in heads">
<div draganddrop drag="handleDrag()">{{hd}}</div>
</th>
</thead>
<tr ng-repeat="row in myData">
<td ng-repeat="hd in heads">
{{row[hd]}}
</td>
</tr>
</table>
</div>
这是JS:
var myApp=angular.module('myApp',[]);
myApp.controller('myCtrl',function($scope){
$scope.handleDrag=function()
{
}
$scope.heads=['name','age','company','tech'];
$scope.myData=[{name:'Jay',age:27,company:'XYZ',tech:'Js'},
{ name:'Rayn',age:30,company:'XYZ',tech:'.net'}]
});
myApp.directive('draganddrop',function(){
return{
scope:{
drag:'&'
},
link: function(scope, element) {
// this gives us the native JS object
var el = element[0];
el.draggable=true;
el.addEventListener(
'dragstart',
function(e) {
e.dataTransfer.effectAllowed = 'move';
// this.classList.add('drag');
return false;
},
false
);
el.addEventListener(
'dragend', …我正面临一个问题，我正在拖动一个 div。
虽然幽灵元素在 MacOs 上看起来不错（在 Chrome 和 FireFox 上都是如此），但在 Windows 中似乎太透明了（在 Chrome 和 FireFox 上都是如此。我尝试了多种方法，但似乎没有任何效果。所以是否可以设置样式幽灵元素？
此外，我尝试在旅途中制作该元素的图像，并将其用作幽灵拖动图像，但透明度问题仍然存在。
我有以下工作代码（另请参阅此小提琴）：
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:170px;padding:10px;border:1px solid #aaaaaa;}
#drag1 {width:50px;height:50px;padding:10px;border:1px solid #000;background-color: #f00; position: absolute;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
//window.alert( ev.clientX + ',' + ev.clientY);
document.getElementById("drag1").style.left = ev.clientX + 'px';
document.getElementById("drag1").style.top = ev.clientY + 'px';
return false;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)"></div>
</div>
</body>
</html>
在这里，您只能将彩色 div 拖放到主 div 内。问题是这个红色 div 从他放下的位置跳了一点。我认为这是因为我使用鼠标 ev.clientX 和 …
我对 html5 可拖动项目有疑问。我一直在看这个例子： https: //codepen.io/retrofuturistic/pen/tlbHE
如果我自定义它并使父母可拖动
<ul>
<li draggable="true" class="parent-li">
<ul id="columns-1">
<li class="column child-li" draggable="true"><header>A</header></li>
<li class="column child-li" draggable="true"><header>B</header></li>
</ul>
</li>
<li draggable="true" class="parent-li">
<ul id="columns-2" draggable="true">
<li class="column child-li" draggable="true"><header>A</header></li>
<li class="column child-li" draggable="true"><header>B</header></li>
</ul>
</li>
</ul>
事实证明，当您尝试对列表项“child-li”进行排序时，它会尝试拖动“parent-li”
this.parentNode.removeChild(dragSrcEl);
DragSrcEl 与 this.parentNode 相同：“parent-li”。
那么只要列表项处于同一级别就可以对它们进行排序吗？