Отслеживание перетаскивания изображений с помощью идентификаторов

0

Хорошо, поэтому я столкнулся с проблемой, сделав что-то для сайта электронной коммерции.

В принципе, это экран, на котором пользователь может перетащить маленькие кнопки на браслет, который они выбрали на предыдущем экране. Они перетаскивают свои пуговицы на браслет, и, как только им нравится комбинация, они должны иметь возможность купить все 4 предмета (1 браслет, 3 кнопки) сразу.

Вот jsFiddle того, как он в основном работает: http://jsfiddle.net/6xRXj/3/

Проблема возникает, когда мне нужно знать, какие кнопки находятся на браслете, а какие нет. Есть ли способ сделать это с помощью drag-and-drop?

Любая помощь приветствуется.

Ниже приведен код из 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);
    }
}
Теги:
drag-and-drop

2 ответа

0

Простой идентификатор сбора ваших изображений в массив, например:

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 кнопки - запретите добавлять больше, пока не будет удалено хотя бы одно.

Поделиться
0

Ну, нам нужно изменить часть вашей функции drop. Я объявил array именем selectedItems. Когда кнопка перетаскивается из доступных элементов в div div bracelet, мы помещаем их в массив. Если он не упал на 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/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню