【问题标题】：How to fix drag and drop JavaScript如何修复拖放 JavaScript
【发布时间】：2014-07-27 20:56:55
【问题描述】：

我创建了这个页面和脚本来使用 JavaScript、HTML、CSS 拖放一个对象。我聚焦对象跟随鼠标将鼠标悬停在页面项目上并将其放在容器上，但我的问题是拖放不起作用？

代码如下：

HTML：

<body onload="initPage()">

    <div class="container">
        <span id="spotLight"></span>
        <h1>Drag and Drop Demos</h1>

        <h2>Page Elements</h2>
        <p>
            Drag the elements on the right into the drop area.
        </p>
        <div id="dd-elements" class="clearfix">
            <ul id="drag-elements">
                <li draggable="true">Element One</li>
                <li draggable="true">Element Two</li>
                <li draggable="true">Element Three</li>
                <li draggable="true">Element Four</li>
                <li draggable="true">Element Five</li>
            </ul>

            <div id="drop-target-one">
                Drop Here!
            </div>
        </div>
    </div>
</body>

CSS：

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1em;
}



#drop-target-one,
#dd-files,
#dd-images {
    border: 5px dashed #D9D9D9;
    border-radius: 10px;
    padding: 5em 2em;
    text-align: center;
}

.over {
    background: #F7F7F7;
}

#drag-elements {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
}

#drag-elements li {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0 1em 1em 0;
    border: 1px solid #D9D9D9;
    background: #F7F7F7;
    border-radius: 3px;
}

//spotLight
#spotLight {
 position: absolute;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
  border-radius: 20px;

  box-shadow: 0px 0px 0px 300px rgba(255, 255, 255, 0.5);
}

#spotLight:after {
  content: '';
  position: absolute;
  left: -25px;
  top: -25px;
  right: -25px;
  bottom: -25px;
  border: solid 1px gray;
  border-radius: 25px;

  box-shadow: 0px 0px 0px 300px rgba(255, 255, 255, 0.6);
}


.clearfix {
  *zoom: 1; }

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: ""; }

.clearfix:after {
  clear: both; }

JavaScript：

window.onload = function() {


    var dropZoneOne = document.querySelector('#drop-target-one');
    var dragElements = document.querySelectorAll('#drag-elements li');
    var elementDragged = null;

    for (var i = 0; i < dragElements.length; i++) {


        dragElements[i].addEventListener('dragstart', function(e) {
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text', this.innerHTML);
            elementDragged = this;
        });


        dragElements[i].addEventListener('dragend', function(e) {
            elementDragged = null;
        });
    };


    dropZoneOne.addEventListener('dragover', function(e) {
        if (e.preventDefault) {
            e.preventDefault();
        }

        e.dataTransfer.dropEffect = 'move';

        return false;
    });


    dropZoneOne.addEventListener('dragenter', function(e) {
        this.className = "over";
    });

    // Event Listener for when the dragged element leaves the drop zone.
    dropZoneOne.addEventListener('dragleave', function(e) {
        this.className = "";
    });


    dropZoneOne.addEventListener('drop', function(e) {
        if (e.preventDefault) e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 

        this.className = "";
        this.innerHTML = "Dropped " + e.dataTransfer.getData('text');

        document.querySelector('#drag-elements').removeChild(elementDragged);
        elementDragged = null;

        return false;
    });

};
function initPage() { 
    document.onmousemove = followMe;
}

function followMe(evt) {
    var evt = (evt) ? evt : ((window.event) ? event : null);
    var object = document.getElementById('spotLight');
        object.style.left = evt.clientX - (object.offsetWidth/2) + 'px';
        object.style.top = evt.clientY - (object.offsetHeight/2) + 'px';
        return;
}

小提琴：

http://jsfiddle.net/Ca5r2/

【问题讨论】：

标签： javascript html css drag-and-drop

【解决方案1】：

好的，我发现了一些让 jsFiddle 工作的东西。

首先，元素不可拖动的原因与您的伪元素#spotlight:after 有关。它被定位为“绝对”，顶部、左侧、底部和右侧的值为 -25px。我不认为是在做你想要的。具有这些位置的元素将占据整个屏幕，因为它将从左边框左侧 25 像素延伸到右边缘之后的 25 像素，依此类推。临时解决办法是添加css属性

pointer-events: none;

其次，你有

<body onload="initPage()">

和

function initPage() {

通常这会很好，但在 JSFiddle 中，javascript 窗口的作用域是在页面 onload 处理程序内，因此函数的作用域是本地的。要将它们放入全局范围，您可以做几件事，但我暂时更改了要显式添加到窗口范围的函数：

window['initPage'] = function() {

另外，因为我们已经在 onload 处理程序中限定了范围，所以我删除了

window.onload = function() {

范围，包括结束大括号。

这是工作的JSFiddle

【讨论】：

喜欢这个指针事件：无；应用于文本 div 的解决方案...谢谢！

【解决方案2】：

为什么不用html5？

<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

source : w3s

【讨论】：

【解决方案3】：

我强烈建议您为此使用 jQuery UI。查看draggable 和droppable 小部件。

【讨论】：

感谢您的注意，但我们需要使用原生 JavaScript，因为它更快