0

わかりました。e コマース サイト用に何かを作成しているときに問題が発生しました。

基本的には、ユーザーが前の画面で選択したブレスレットに小さなボタンをドラッグできる画面です。ボタンをブレスレットにドラッグし、組み合わせが気に入ったら、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);
    }
}
4

2 に答える 2

0

画像の 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 つのボタンが既に追加されている場合 - 少なくとも 1 つが削除されるまで追加を禁止します。

于 2013-10-01T03:19:04.870 に答える