將圖像拖放到圖像上以填充缺失的部分

Question

我是前端開發的初學者，試圖製作一個我自己的項目，在這裏我將圖像拖放到圖像上以填充圖像中缺少的部分。我已經嘗試過使用HTML中的圖像映射並嘗試使用HTML5拖放功能。但似乎我們只能放在一個div上，而不是圖像地圖上的區域。如果在圖像被丟棄時該區域被突出顯示，這也會很好。如果有人能指出我可以使用的UI插件或一些資源來啓動它，那對我來說是一個很好的開始。

Answer 1

正如JavaSpyder指出的那樣，jQuery UI看起來像是一個很好的插件，可以用於HTML5功能。您可以使用最少量的代碼輕鬆地爲DOM元素提供拖放功能。

您的代碼可能是這個樣子：

$(function() { 
$("#draggable").draggable(); 
$("#droppable").droppable({ 
    drop: function(event, ui) { 
    // target image and do stuff with it 
    } 
}); 
}); 

https://jqueryui.com/draggable/

https://jqueryui.com/droppable/