html - 拖放 : How can I make an image go back to it's original position?-6ren

html - 拖放 : How can I make an image go back to it's original position?

转载作者：行者123 更新时间：2023-11-28 12:19:14

这是我要进行的一般概念的 jsFiddle:

http://jsfiddle.net/6xRXj/1/

HTML 和 JS:

<!DOCTYPE HTML>
<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>

<body>

    <div id="bracelet">

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

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

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

    </div>

    <br/><br/><br/><br/><br/>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src= "http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src= "http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag3" src= "http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

            <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag4" src= "http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

                <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag5" src= "http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

                    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag6" src= "http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

                        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag7" src= "http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag8" src= "http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag9" src= "http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

            <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag10" src= "http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

                <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag11" src= "http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

                    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag12" src= "http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>

CSS:

#div1 {
    width:50px;
    height:50px;
    padding:10px;
    border:1px solid #aaaaaa;
    display: inline;
    float: left;
    margin-bottom: 25px;
    margin-left: 50px
}

#div2 {
    width:50px;
    height:50px;
    padding:10px;
    border:1px solid #aaaaaa;
    display: inline;
    float: left;
}

#bracelet {
    width:420px;
    height:75px;
    padding: 10px;
    margin-left: 30px;
    border:1px solid #aaaaaa;
    background-color: gray;   
}

我想要完成的是能够将图像移动到放置点上，然后将其放置在其他任何地方并让它回到原来的位置。目前它只能放在指定的div上，但我希望它能够放在任何地方以返回到原来的位置。

感谢任何帮助。

最佳答案

您可以使用 dragend 事件确定元素是否被放置在可放置元素之外。

<img ... draggable="true" ondragend="dragEnd(event)" ondragstart="drag(event)">

function dragEnd(ev){
    if(ev.dataTransfer.dropEffect == "none"){

        // REVERT BACK TO ORIGINAL POSITION

    }
}

然后您必须决定如何指定“原始位置”。您可能会考虑将原始父级的 id 存储在 data- 属性中，然后读取它并将其追加回该父级。另一种选择是在初始页面加载时或什至在第一次 dragstart 时通过 javascript 填充这些 data- 属性。

编辑: 工作示例:

http://jsfiddle.net/6xRXj/3/

您会注意到我必须删除重复的 id，因为它们必须是唯一的。

function drag(ev) {
    var el = ev.target;
    var parent = el.getAttribute("data-parent");

    // if the parent data attribute is not yet set, set it to current parent
    if(!parent){
        el.setAttribute("data-parent", el.parentNode.id);
    }

    ev.dataTransfer.setData("Text", el.id);
}

function dragEnd(ev){
    if(ev.dataTransfer.dropEffect == "none"){

        // get parent from data attribute
        var parent = document.getElementById(ev.target.getAttribute("data-parent"));

        // append back to the original parent            
        parent.appendChild(ev.target);
    }
}

关于html - 拖放 : How can I make an image go back to it's original position?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18968154/

文章推荐： javascript - 为什么这个内联 JavaScript 代码不起作用？

文章推荐： javascript - 在 jquery 中访问 data-*

文章推荐： ios - 错误 - EXC_BREAKPOINT(代码=1，子代码=0x100308448)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 拖放 : How can I make an image go back to it's original position?