JS - помощь при перетаскивании

У меня есть текущий рабочий html/js-код, который позволяет мне перемещать 4 объекта в их соответствующие атрибуты DIV, однако я полностью смущен тем, как заставить оповещение всплывать один раз пользователь имеет ВСЕ изображения в соответствующем месте. Если кто-то имеет лучший способ или может указать мне в правильном направлении, я бы очень признателен. Вот мой jsfiddle ссылку ниже:JS - помощь при перетаскивании

https://jsfiddle.net/crizil/z2zd6bfk/1/

<body> 
    <img id="puzzle1" src="images/puzzle1.jpg" draggable="true" ondragstart="dragEvent(event)" 
width="500" height="100"> 
    <img id="puzzle2" src="images/puzzle2.jpg" draggable="true" ondragstart="dragEvent(event)" 
width="500" height="100"> 
    <img id="puzzle3" src="images/puzzle3.jpg" draggable="true" ondragstart="dragEvent(event)" 
width="500" height="100"> 
    <img id="puzzle4" src="images/puzzle4.jpg" draggable="true" ondragstart="dragEvent(event)" 
width="500" height="100"> 

    <div id="div1" ondrop="dropPic(event)" ondragover="dropEvent(event)" data- drop="puzzle1"> 
    </div> 
    <div id="div2" ondrop="dropPic(event)" ondragover="dropEvent(event)" data- drop="puzzle2"> 
    </div> 
    <div id="div3" ondrop="dropPic(event)" ondragover="dropEvent(event)" data- drop="puzzle3"> 
    </div> 
    <div id="div4" ondrop="dropPic(event)" ondragover="dropEvent(event)" data- drop="puzzle4"> 
    </div> 
</body> 

    //allow ability to drop objects 
    function dropEvent(ev) { 
     ev.preventDefault(); 
    } 

    //allow image dragging 
    function dragEvent(ev) { 
     ev.dataTransfer.setData('text', ev.target.id); 
    } 

    //drop image event 
    function dropPic(ev) { 
     ev.preventDefault(); 
     var data = ev.dataTransfer.getData('text'); 
    //make it to only drop in certain DIV attribute 
     if (ev.target.getAttribute('data-drop') == data) 
      ev.target.appendChild(document.getElementById(data)); 
    }

Если мне нужно дополнительно уточнить, что я пытаюсь сделать, дайте мне знать, и я надеюсь, есть лучший способ, чтобы сообщить, что я пытаясь сделать.

источник

2016-03-03 crizil

Вы можете добавить счетчик и проверить, если он равен document.querySelectorAll('[data-drop]').length:

var counter = 0; 
function dropPic(ev) { 
     ev.preventDefault(); 
     var data = ev.dataTransfer.getData('text'); 
     //make it to only drop in certain DIV attribute 
     if (ev.target.getAttribute('data-drop') == data) { 
      ev.target.appendChild(document.getElementById(data)); 
      if (++counter == document.querySelectorAll('[data-drop]').length) { 
       alert('all done'); 
      } 
     } 
}

источник

2016-03-03 15:20:58 jcubic

JS - помощь при перетаскивании

ответ

Смежные вопросы