javascript - 无需 jQuery 即可拖动

Question

就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放， visit the help center以获得指导。

已关闭 10 年前。

我正在寻找使 div 可拖动的 JavaScript 代码，我发现的唯一的事情是您需要下载 jQuery，有没有什么方法可以使用 JavaScript 在不使用 jQuery 的情况下使 div 可拖动。

Answer 1

绝对是的。拖动实际上非常容易。有很多步骤，但这里是一个概要:

• 首先，要使元素可拖动，只需添加 draggable属性如下:
  <div draggable="true"> 。请注意，默认情况下图像和链接是可拖动的 - 在某些情况下您可能需要设置 draggable="false"它们的属性。

• 现在你需要在它们被拖动时执行一些操作。设置dragstart元素上的事件监听器。在这种情况下，您可能需要包含如下代码:

evt.dataTransfer.clearData(); // clear any default data
evt.dataTransfer.setData("Text","This is some text");
somevar = this; // store the element being dragged

• 接下来，您需要处理将元素拖动到有效目标上时发生的情况。这是唯一有点复杂的部分，因为有两个事件可以执行此操作: dragenter和dragover 。第一个在您实际进入目标时触发，而第二个则像 mousemove 一样触发。做。您通常希望两者都发生相同的事件。在这种情况下，要使目标成为有效的放置点，您必须调用 evt.preventDefault()和return false (因为默认操作是不允许放置)

• 最后附上drop事件到目标元素。当您将正在拖动的元素放到适当的区域时，将触发此事件。

您还可以选择添加 dragend事件到源元素。当元素不再被拖动时，无论元素是否被成功放置，都会触发此事件。还有dragleave如果您远离放置目标。

如果您需要进一步的帮助，请告诉我，但我希望这已经解释了如何做到这一点。现在，一个非常基本的例子:

<div id="source" draggable="true" style="background:#f88">Drag me</div>
<div id="target" style="background:#88f;padding:5px">Drop here</div>
<script type="text/javascript">
    var source = document.getElementById('source'),
        target = document.getElementById('target'),
        dragging = null, // the element being dragged
        addEvent = function(source,types,handler) {
            // this is just a standard cross-browser event registration function
            // it can handle more than one type at once
            var typearr = types.split(" "), l = typearr.length, i;
            for( i=0; i<l; i++) {
                if( source.addEventListener)
                    source.addEventListener(typearr[i],handler,true);
                else
                    source.attachEvent("on"+typearr[i],handler,true);
            }
        };
    addEvent(source,"dragstart",function(evt) {
        evt = evt || window.event;
        evt.dataTransfer.clearData();
        dragging = this;
        setTimeout(function() {dragging.style.opacity=0.5;},1);
        // ^ tiny pause so browser can get the right drag image
    });
    addEvent(target,"dragenter dragover",function(evt) {
        if( dragging) {
            this.style.backgroundColor = "#8f8";
            evt = evt || window.event;
            if( evt.preventDefault) evt.preventDefault();
            return false;
        }
    });
    addEvent(target,"dragleave",function() {this.style.backgroundColor = "#88f";});
    addEvent(target,"drop",function() {
        if( dragging) {
            this.appendChild(dragging);
            this.style.backgroundColor = "#88f";
            dragging = null;
            if( evt.preventDefault) evt.preventDefault();
            return false;
        }
    });
    addEvent(source,"dragend",function() {this.style.opacity=1;});
</script>

和here是 fiddle 。