開發拖放掉交換javascript/jquery

我正在實現一個拖放代碼，我現在有6個可拖動和可拖放的圖像，這段代碼做的是當一個圖像被拖拽過另一個它們交換的時候，所有的圖像交換的地方，以及（像一種）我試着做的只是交換2張圖片的位置，剩下的只剩下其他任何想法了。代碼（javascript和jquery） -開發拖放掉交換javascript/jquery

function itemInSpot(drag_item, spot) { 
    var oldSpotItem = $(spot).find('img'); 
    if (oldSpotItem.length > 0) { 
     oldSpotItem.appendTo('#inventory').draggable({ 
      revert: 'invalid' 
     }); 
    } 
    var item = $('<img />'); 
    item.attr('src', drag_item.attr('src')).attr('class', drag_item.attr('class')).appendTo(spot).draggable({ 
     revert: 'invalid' 
    }); 
    drag_item.remove(); // remove the old object 
} 

$(document).ready(function() { 
    $(".circles").draggable({ 
     revert: 'invalid' 
    }); 
    $('#inventory').droppable(); 
    $("#circles").droppable({ 
     accept: '.circles' 
    }) 
    $('#circles,#inventory').bind('drop', function(ev, ui) { 
     itemInSpot(ui.draggable, this); 
    }); 
});

來源

2012-03-10 user1259527

你可以發佈你的html甚至更好，創建一個[小提琴]（http://jsfiddle.net/）。 – 2012-03-10 11:04:08

沒有看到您的HTML標記我猜#circles是一個拖放區域，其中包含許多圖像。這使得很難找出哪個圖像被丟棄。相反，爲什麼不讓每個圖像成爲放置目標而不是整個#circles元素？這樣，您就可以確切地知道哪個圖像被放到了上面，而您的交換功能只能與圖像本身一起使用，而不能與包含大量圖像的整個元素一起使用。

來源

2012-03-10 11:00:54 davidethell

謝謝你的回答，你能提供一些代碼也許讓我開始謝謝，或者任何例子？ – user1259527 2012-03-10 22:47:41

這是我的jsfiddle btw - http://jsfiddle.net/kommandoss/YuRpU/ – user1259527 2012-03-10 23:57:31

開發拖放掉交換javascript/jquery

回答

相關問題