Всем привет! Помогите пожалуйста со скриптом. На выбор есть 3 элемента при перетаскивании которых в блоке result появляется информации о них.
Проблема в том что пока при перетаскивании разных элементов, в result появляется одна и таже информация.
Выглядеть должно было так:
При перетаскивании элемента1, появляется информация1. При перетаскивании элемента2, информация1 удаляется и появляется информация2 и тд.
В js особо не разбираюсь, но сделать надо.. поэтому пожалуйста более понятным языком объясните
Вот код:
<script type="text/javascript">
$(function(){
$("#draggable1").draggable();
$("#droppable").droppable({
drop: function(){
$("#result").append("Dropped!<br /><p>Da Vinci</p>");
}
});
});
$(function(){
$("#draggable2").draggable();
$("#droppable").droppable({
drop: function(){
$("#result").append("Dropped!<br /><p>Newton</p>");
}
});
});
$(function(){
$("#draggable3").draggable();
$("#droppable").droppable({
drop: function(){
$("#result").append("Dropped!<br /><p>Goethe</p>");
}
});
});
</script>
</head>
<body>
<div id="draggable1" class="ui-widget-content">
<p>Da Vinci</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>Newton</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>Goethe</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<div id="result"></div>
</body>
Demo