Question

我正在处理图像滑块。当我为滑块选择图像时，我想在其中添加拖放功能。因此用户可以重新排列图像顺序。下面的代码动态创建具有这些图像的div。此代码的jquery函数在下面的示例链接中给出，该链接用于完成我所需要的。

<div id="filesList">
    @foreach (var item in imgArray)
    {
    <div ondrop="drop(event)" ondragover="allowDrop(event)">
        <div class="img101 floatleft selectedFile tempImages" id="img101_@i" ondragstart="drag(event)">
            <img src="@item"/>
            <div>
                <a href="#" id="DeleteCurrentImage" onclick="DeleteCurrentImage('@item',@i);">Delete</a>
            </div>
        </div>
    </div>
        i++;
    }
    <div style="clear: both"></div>
</div>

我已经从已经给出问题的stackoverflow和其他来源测试了某些选项（给定链接中的示例）。当我使用下面给出的代码示例时。没有得到所需的结果。此代码仅从div1中拖动图像，并将其替换为其他div2中的现有图像。我不想要此功能。我希望将div1元素拖放到div2中时使用。 div1的元素应替换为div2的元素。

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #div1 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <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>
    <p>Drag the W3Schools image into the rectangle:</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

将div1元素与div2元素互换。使用拖放功能

0 个答案: