Javascript 如何在HTML中绘制一个可拖动的小部件，最好使用angular？

我想要一个自由浮动的HTML div。可以在任何位置拖动和定位，而不考虑其他图元。元素可能会阻挡下面元素的视图，这没有问题。最小化功能也很好。这有图书馆吗

---

谷歌搜索结果中的项目可以从一个位置拖动到另一个位置。找不到任何自由浮动库

有一个很好的指令，您可以使用它。 它的GitHub链接是。 可以找到演示

示例代码：

HTML-DOM:

<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}</div>
<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:50px;'>
  <div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}</div>
</div>

App.controller('OverviewCtrl', function($scope) {
  $scope.list1 = {title: 'AngularJS - Drag Me'};
  $scope.list2 = {};
});

---

您必须在javascript中使用

draggable

属性和一些逻辑。。 （我用的是js而不是angularjs，所以这可能不是你的答案） 代码将类似于

函数拖动启动（事件）{
var style=window.getComputedStyle（event.target，null）；
event.dataTransfer.setData（“text/plain”），（parseInt（style.getPropertyValue（“左”），10）-event.clientX）+’，“+（parseInt（style.getPropertyValue（“上”），10）-event.clientY）+’，“+event.target.getAttribute（“数据项”）；
}
函数拖放（事件）{
event.preventDefault（）；
返回false；
}
函数删除（事件）{
var offset=event.dataTransfer.getData（“text/plain”）.split（'，'）；
var dm=document.getElementsByClassName（'dragme'）；
dm[parseInt（偏移量[2]）].style.left=（event.clientX+parseInt（偏移量[0]，10]）+'px'；
dm[parseInt（offset[2]）].style.top=（event.clientY+parseInt（offset[1]，10））+'px'；
event.preventDefault（）；
返回false；
}
var dm=document.getElementsByClassName（'dragme'）；
对于（变量i=0；i

div{
位置：绝对位置；
左：0；
排名：0；
/*设置这些选项，使Chrome不会从getComputedStyle返回“自动”*/
宽度：200px；
背景：rgba（255，255，255，1）；
边框：2倍实心rgba（0,0,0,1）；
边界半径：4px；
填充：8px；
}
身体，
html{
最小高度：100vh；
}

拖动我

JQuery有一个简单的

可拖动

选项，请看一下：

要使div自由浮动，只需将其设置为：

position: absolute;

---

如果您已经在引用jquery，为什么不直接调用$（“.dragme”）.draggable（）；？这达到了海报的要求。或$（“.dragme”）.dialog（{modal:false，autoOpen:true}）；。您也添加了事件处理程序，这是一个额外的奖励，但并没有被要求，所以很荣幸：-）。所以答案是肯定的，这里有图书馆。剑道和/或jquery是其中的两个。是的，我考虑过

draggable（）

和

droppable（）

，但它会拖到指定的区域，我想，OP想拖到任何地方。这就是我附加事件的原因。我说的对吗？绝对定位不一定是自由浮动的；我相信你的意思是位置：固定。还是我在这里遗漏了什么？绝对位置不应在根HTML级别处理；它应该总是有一个容器将内容保存在所需的位置。我在根目录下使用过多次绝对值，从未遇到过问题，我这样做是错误的吗？此外，位置固定受页面滚动的影响，所以它不是完全“自由”的。它实际上不是自由拖动到任何地方。。。你必须把它放在盒子里。