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 / UI：

$(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/

添加图片并允许编辑

1 个答案: