Здравствуйте люди добрые. Помогите разобраться. Есть левая колонка в которой находиться картинки и они могут быть перетаскиваемы .draggable и есть основной контент который принимает те самые картинки .droppable, картинки клонируются в контент методом clone и снова стают перетаскиваемые. Но проблема в том что когда они перетаскиваются в контенте они продолжают клонироваться. А это мне совсем не нужно. Как исправить код?
html код
<div id="wraper">
<div id="heder"></div>
<div id="saitbar">
<div id="element1" ><img src="images/1.png" width="100" height="100" alt="подсказка" /></div>
<div id="element2" ><img src="images/2.png" width="100" height="100" alt="подсказка" /></div>
<div id="element3" ><img src="images/3.png" width="100" height="100" alt="подсказка" /></div>
<!--<div id="element4" ><img src="images/1.png" width="100" height="100" alt="подсказка" /></div>
<div id="element5" ><img src="images/2.png" width="100" height="100" alt="подсказка" /></div>
<div id="element6" ><img src="images/3.png" width="100" height="100" alt="подсказка" /></div>
<div id="element7" ><img src="images/1.png" width="100" height="100" alt="подсказка" /></div>
<div id="element8" ><img src="images/2.png" width="100" height="100" alt="подсказка" /></div>
<div id="element9" ><img src="images/3.png" width="100" height="100" alt="подсказка" /></div>-->
</div>
<div id="content">
<div id="contener" class="ui-widget-content"></div>
</div>
js код
$(document).ready(function() {
// перетаскивание
$('div[id*=element]').draggable({
containment: "#wraper",
revert: "invalid",
grid: [ 20,20 ],
opacity: 0.5,
scroll:false,
zIndex: 35,
appendTo: "body",
helper: "clone",
cursor: "move",
stack:"div[id*=element]"
});
//приемник
$( "#contener" ).resizable().droppable({
accept: "div[id*=element]",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
var element = $(ui.draggable);
element.fadeIn(1000, function() {
$(this).clone()
.addClass("newElement")
.appendTo("#contener")
.draggable()
});
}
});
});