javascript - 拖放到特定位置

Question

我刚刚开始学习基本的 JavaScript，但我被困在我想做的事情上。我有四个图像（1,2,3,4）。我希望图像 4 只能放在图像 3 上。图像 3，只能放在图像 2 上，依此类推。删除最后一张图片后，我希望它打开一个页面。我遇到的问题是只允许将图像放在另一个上。我该怎么办？这是我到目前为止的代码：

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));
    window.open("button.html", "_self");
}

Answer 1

检查下一个代码

    //load "init" when document it's ready
$(document).on('ready',init);

function init() { 
  $( ".img-drop" ).draggable({ containment: "#left"});
  $('.img-drop').droppable( {drop: handleDropEvent}); 
}

// this is what to do when card drops in tardis
function handleDropEvent( event, ui ) {
    var id_drag_element = ui.draggable.attr("id").split('img-')[1];
    var id_drop_element = $(event.target).attr('id').split('img-')[1];
    var last_element = !(!!$('#img-3').length) && !(!!$('#img-3').length);
    if(id_drop_element == 3 && id_drag_element == 4 )
        $('#img-4').remove()
    else if(id_drop_element == 2 && id_drag_element == 3 && !(!!$('#img-4').length)  )
        $('#img-3').remove()
    else if(id_drop_element == 1 && id_drag_element == 2 && last_element   )
    {
        $('#img-2').remove();
        alert('open page...');
        window.open("http://www.google.cl", "_self");
    }
}

演示

JSFindle