如何动态拖动所有项目

Question

这是我的JS拖动，它适用于我期望的单个元素。但这需要一个特定的元素" myimg"。实际上，将有更多具有相同ID的元素，那么我该如何拖动每个元素？

如果您可以提供一些例子并解释" EM，那将是很棒的。预先感谢！

这是代码

var my_img=document.getElementById("myimg");
var drag_area=document.getElementById("main_area");
my_img.ondragstart=function(evt)
{
    var evt=evt || window.event;
    evt.dataTransfer.setData("text",(evt.clientX-this.offsetLeft)+";"+(evt.clientY-this.offsetTop));
}
drag_area.ondragover=function(evt)
{
    var evt=evt || window.event;
    if(typeof evt.preventDefault=="function")
    {
        evt.preventDefault();
    }
    else
    {
        evt.returnValue=false;
    }
}
drag_area.ondragenter=function(evt)
{
    var evt=evt || window.event;
    if(typeof evt.preventDefault=="function")
    {
        evt.preventDefault();
    }
    else
    {
        evt.returnValue=false;
    }
}
drag_area.ondrop=function(evt)
{
    var evt=evt || window.event;
    var drag_data=evt.dataTransfer.getData("Text").split(";");
    var offset_x=drag_data[0],
        offset_y=drag_data[1];
    if(typeof evt.preventDefault=="function")
    {
        evt.preventDefault();
    }
    else
    {
        evt.returnValue=false;
    }
    my_img.style.left=(evt.clientX-offset_x)+"px";
    my_img.style.top=(evt.clientY-offset_y)+"px";
    console.log(my_img.name);
}

`

Answer 1

您可以使用事件Ondragstart事件进行购买，您将获得事件目标（e.target），将其存储在临时变量中，然后执行您想要执行的任何操作，之后null的可变值。

一个在您的代码中不好的是元素的ID应该始终是唯一的。使用类一起选择多个元素。

这个东西不需要任何ID和类别的元素。

var temp = null;
onDragStart(e){
 temp = e.target;
 doSomething();
}
doSomething(){
 // your action to perform
 temp = null;
}

Answer 2

**

http://rubaxa.github.io/sortable/

**

可排序 - 是一个JavaScript库，用于现代浏览器和触摸设备上可重新排序的拖放列表。没有jQuery。支持流星，Angularjs，React，聚合物，敲除和任何CSS库，例如引导程序。