添加图像并允许编辑

嗨我很新的JQUERY。对我来说这是一件新事物。添加图像并允许编辑

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

在当前点我在，我不知道如何真正创建一个jQuery，一旦点击图片，它会出现在这里用户可以移动图像的区域。

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

的链接，somethinng类似。将等作为遵循

Example

像catifier，图像将被放置在一边。一旦点击图像，图像将被带到黑框，并从那里用户可以移动图像。

来源

2014-12-05 Faiz Everywhere

你*事*类似链接时，无法使用......不给任何想法的这一切，实际上对... – 2014-12-05 07:15:46

由于我是新对此。我不确定如何开始这个项目。我希望有人能帮助我开始，因为我真的很陌生。：/ – 2014-12-05 07:30:27

链接是** **示例像上面的链接，我的图片会在侧，一旦点击了我希望的Jquery将能够点击图片放入一开始图像旁边的复选框。 – 2014-12-05 07:31:42

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/

来源

2014-12-05 07:42:43

非常感谢您的信息。它给了我一些项目应该以代码形式看起来的东西。你一直是一个伟大的帮助:) – 2014-12-05 07:58:39

@FaizEverywhere欢迎Faiz！ – 2014-12-05 07:59:09

@FaizEverywhere一些提示（所有发现这里SO）我可以建议是：当你单击图像使其高'Z-index'，这样会覆盖其他图像。你也可以创建一个方法，如果把它拖到'＃吸引器之外，可以将图像重置为'＃thumbs'。我会把它留给你的研究。你现在知道从哪里开始;） – 2014-12-05 08:04:43

添加图像并允许编辑

回答

相关问题