将图像拖放到图像上以填充缺失的零件

Question

我是前端开发的初学者，试图自己制作一个项目，我要在其中拖放图像，以填充缺失的部分图像。我已经尝试使用HTML中的图像映射尝试了一下，并尝试使用HTML5拖放功能。但是，似乎我们只能在图像映射中落到一个区域。如果将图像丢弃时突出显示该区域，那也很好。如果有人可以将我指向我可以使用的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/