【问题标题】:Drag and drop images over an image to fill the missing parts [closed]将图像拖放到图像上以填充缺失的部分[关闭]
【发布时间】:2017-03-01 18:46:34
【问题描述】:
我是前端开发的初学者,正在尝试制作自己的项目,我将在其中将图像拖放到图像上以填充图像中缺失的部分。我已经尝试过使用 HTML 中的图像映射并尝试使用 HTML5 拖放功能。但似乎我们只能放在一个 div 上,而不是放在图像地图中的区域上。如果在删除图像时突出显示该区域,那也很好。如果有人能指出我可以使用的 ui 插件或一些资源来启动它,那对我来说将是一个很好的开始。
【问题讨论】:
标签:
javascript
jquery
css
html
frontend
【解决方案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/