使用某种ID跟踪拖放图像

Tracking drag-and-drop images with ID's of some sort

本文关键字：跟踪 拖放 图像 ID      更新时间：2023-09-26

好的，所以我在为电子商务网站制作东西时遇到了一个问题。

基本上，它是一个屏幕，用户可以在其中将小按钮拖动到他们在上一个屏幕上选择的手镯上。他们将按钮拖到手镯上，一旦他们喜欢这种组合，他们应该能够一次购买所有 4 件物品（1 件手镯、3 个按钮）。

以下是它基本工作原理的jsFiddle：http://jsfiddle.net/6xRXj/3/

问题就来了，当我需要知道哪些按钮在手镯上，哪些不是。有没有办法通过拖放来做到这一点？

任何帮助将不胜感激。

下面是来自jsFiddle的代码...

.HTML：

<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" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag1" src="http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div3" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag2" src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div4" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag3" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div5" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag4" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div6" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag5" src="http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div7" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag6" src="http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div8" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag7" src="http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div9" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag8" src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div10" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag9" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div11" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag10" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div12" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag11" src="http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg"  ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div13" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag12" src="http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg"  ondragend="dragEnd(event)" 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
}
.drop {
    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;
}

.JS：

function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    var el = ev.target;
    var parent = el.getAttribute("data-parent");
    if(!parent){
        el.setAttribute("data-parent", el.parentNode.id);
    }
    ev.dataTransfer.setData("Text", el.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
function dragEnd(ev){
    if(ev.dataTransfer.dropEffect == "none"){
         var parent = document.getElementById(ev.target.getAttribute("data-parent"));
        parent.appendChild(ev.target);
    }
}
好吧，

我们需要修改drop函数的某些部分。我已经声明了一个名为 selectedItems 的array。当按钮从可用项目拖动到braceletdiv 上时，我们将其放入数组中。如果它没有放到bracelet上，我们把它从数组中删除。您可以随时单击get按钮以获取所选项目。

////array to hold selected buttons
var selectedItems = [];
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text"),
        item = document.getElementById(data),
        i = 0,
        elem = document.getElementById(data);
    ev.target.appendChild(item);
    ////MODIFICATION
    if (ev.target.parentNode === document.getElementById('bracelet')) {
        selectedItems.push(elem);
    } else {
        i = selectedItems.indexOf(elem);
        selectedItems.splice(i, 1);
    }
}

要读取所选项目：

function getGems() {
    var pra = document.getElementById("ptag"),
        i = 0;
    pra.innerText ='';
    try {
        for (i = 0; i < selectedItems.length; i++) {
            if (selectedItems[i]) {
                pra.innerText += ", " + selectedItems[i].id
            }
        }
    } catch (er) {
        pra.innerText = 'Error: ' + er;
    }
}

更新的小提琴：http：//jsfiddle.net/amantur/6xRXj/5/

将图像的 ID 简单收集到数组中，例如：

var arr = [];
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    // add ID of the image to array
    arr.push(data)
    ev.target.appendChild(document.getElementById(data));
}

这样，您将知道已经添加了哪些图像（以及添加多少）并采取相应的行动。 例如，如果已经添加了 3 个按钮 - 不允许添加更多按钮，直到至少删除一个按钮。

相关文章：