Question

我已经设置了一个基本脚本，允许我将图像从一列拖到另一列，并在此过程中将其克隆。此功能有效，并且元素被克隆，但是一旦元素被删除，原始元素就会从DOM中的位置移动到容器的底部。

如何阻止这种情况发生？我希望源图像在克隆后保持原位。

我正在使用的脚本如下：

<script>

        var clone;
        var cloneId;

        function dragStart(ev) {
            ev.dataTransfer.effectsAllowed = 'copy';
            ev.dataTransfer.setData('text', ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target, 0,0);

            clone = ev.target.cloneNode(true);
            cloneId = ev.target.getAttribute('id');
            clone.className += ' ' + 'selected';
            ev.target.parentNode.appendChild(clone);

            return true;
        }

        function dragEnter(ev) {
            event.preventDefault();
            return true;
        }

        function dragOver(ev) {
            return false;
        }

        function dragDrop(ev) {
            var src = ev.dataTransfer.getData('text');
            clone.className += ' ' + 'cloned';
            clone.id = cloneId + '_cloned';
            ev.target.appendChild(document.getElementById(src));
            src.removeAttribute('draggable');
            ev.stopPropagation();
            return false;
        }

    </script>

可拖动元素具有以下标记：

<img src="images/module_image-12.png" alt="Full width image" id="module_1" draggable="true" ondragstart="return dragStart(event)">

以下是该问题的一个有效示例：http://codepen.io/AlxTheRed/pen/jBLQRj

Answer 1

找到了解决方案！

不得不改变这一行：

ev.target.appendChild(document.getElementById(src));

到

ev.target.appendChild(document.getElementById(clone.id));

所以，我试图获取整个对象的ID，而不是对象的ID。它现在按预期工作。

HTML5 Drag＆amp; Drop：Source元素在克隆后移动到结尾

1 个答案: