創建具有兩個IDS上滴

執行功能dragables的名單上有一系列的HTML跨度，如：創建具有兩個IDS上滴

<span class="dragable" id="Apple"> 
<span class="dragable" id="Banana"> 
<span class="dragable" id="Carrot">

...等。我的目標是將每個跨度拖放到任何其他跨度上。在發生這種情況時，將調用JavaScript函數，這將以某種方式確定拖放元素的ID，然後將它們記錄到控制檯（當然用於調試目的）

使這些跨度變得很簡單，但我不確定如何去傳遞ID到JavaScript。我已經看過一些關於通過事件傳遞ID的教程，但沒有任何清晰的教程。

任何意見將不勝感激。

來源

2016-10-16 Julian Lachniet

你可以使用jQuery UI。它提供拖放就像你需要它：

$(document).ready(function() { 
 
    var $output = $('#output'); 
 
    $(".draggable").draggable({revert: true}).droppable({ 
 
    drop: function(event, ui) { 
 
     var $dragged = $(ui.draggable[0]); 
 
     $output.text($dragged.attr('id') + " was dropped on " + $(this).attr('id')); 
 
    } 
 
    }); 
 
});

.draggable { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
    
 
<span class="draggable" id="Apple"></span> 
 
<span class="draggable" id="Banana"></span> 
 
<span class="draggable" id="Carrot"></span> 
 

 
<div id="output"></div>

有一個仔細看看的draggable和droppable的文檔，查看完整的功能。

來源

2016-10-16 22:29:52 Dario

很好的回答！幫助過我！只是想知道，如何調整角落的角度？這可以調整嗎？ – Leo

我認爲這是不可能的，只是使用droppable。你可以檢查兩個矩形之間的交點。從draggable中檢查[events]（https://jqueryui.com/draggable/#events）示例以查看在拖放可拖動對象的任何位置時如何執行。但無論如何，如果它們重疊，你必須手動檢查。 – Dario

是的，我想過使用頂部和離開的事件，然後計算所有其他元素的位置，看看他們是否匹配，謝謝！ – Leo

創建具有兩個IDS上滴

回答

相關問題