添加圖像並允許編輯

嗨我很新的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

添加圖像並允許編輯

回答

相關問題