0

我一直在寻找使 div 可拖动的 JavaScript 代码，而我发现的唯一一件事是您需要下载 jQuery，有没有办法使用 JavaScript 在没有 jQuery 的情况下使 div 可拖动。

4

3 回答 3

2

绝对地。拖动实际上很容易。有很多步骤，但这里有一个破败：

  • 首先，要使元素可拖动，只需添加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()and 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>

这是一个小提琴。

于 2013-03-07T19:41:59.257 回答
0

就在这里。但是您必须处理浏览器的差异。

http://www.w3.org/html/wg/drafts/html/master/editing.html#dnd

我强烈推荐你使用 JQuery。没有理由不这样做。

于 2013-03-07T19:18:44.250 回答
0

由于jquery是google托管的，所以不需要下载，直接引用即可：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

有关谷歌托管 jquery 的更多信息：http: //encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

但是，如果你如此渴望使用纯 js，我强烈推荐这个教程： http ://tech.pro/tutorial/650/javascript-draggable-elements

于 2013-03-07T19:20:21.687 回答