HTML：

Question

我创建了这个页面和脚本，使用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/

Answer 1

为什么不使用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

Answer 2

好的，我发现了一些让jsFiddle工作的事情。

首先，元素不可拖动的原因与你的伪元素#spotlight：after有关。它位于绝对的位置。顶部，左侧，底部和右侧的值为-25px。我不认为你正在做你想做的事。具有这些位置的元素将占据整个屏幕，因为它将从左边界的25px延伸到右边缘之后的25px，依此类推。临时解决方案是添加css属性

pointer-events: none;

其次，你有

<body onload="initPage()">

和

function initPage() {

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

window['initPage'] = function() {

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

window.onload = function() {

范围界定，包括结束括号。

这是工作JSFiddle

Answer 3

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

如何修复拖放JavaScript

HTML：

CSS：

的JavaScript：

小提琴：

3 个答案: