javascript - 添加图像并允许编辑

Question

您好，我是 JQUERY 的新手。这对我来说是一件新鲜事。

我的任务是能够收集并放置图像到允许用户将对象实际移动到他/她喜欢的任何位置的区域。

目前，我不确定如何实际创建一个 JQUERY，一旦单击图像，它就会出现在用户可以移动图片的区域。

真的很感谢这里的帮助，因为我真的很陌生。

类似的链接如下

Example

和catifier一样，图片会放在旁边。单击图像后，图像将被带到黑框中，用户可以从那里移动图像。

Answer 1

jsBin demo

使用 jQuery 和 jQuery UI 就这么简单:

<div id="thumbs">
  <img src="cat1.jpg">
  <img src="cat2.jpg">
</div>  
<div id="dropper"></div>

CSS:

#thumbs{float:left;width:170px;}
#dropper{background:#223;height:400px;overflow:hidden;}

jQuery/用户界面:

$(function(){ // DOM ready 

  $('#thumbs img').draggable({
    revert: "invalid",  // revert to original pos. if not dropped into droppable
    containment: "body" // prevent the user from dragging the image out of sight
  });
  $('#dropper').droppable(); // The droppable element

});

更多信息见: http://jqueryui.com/draggable/和 http://jqueryui.com/droppable/