2014-01-19 3 views
1

Я пытаюсь перетащить элемент в контейнер, сохранив его копию в исходном местоположении.Перетащите капюшон и вернитесь в JQuery

Мой код выглядит следующим образом

<script type="text/javascript"> 
    $(document).ready(function() { 
     // sets the draggable 
     $('#drag .drg').draggable({ 
      cursor: 'move',   // sets the cursor apperance 
      revert: 'valid' 

     }); 

     // sets droppable 
     $('#drop').droppable({ 
      drop: function (event, ui) { 
       // after the draggable is droped, hides it with a hide() effect 
       ui.draggable.hide(1000); 
      } 
     }); 

     // when the "#sw" element (inside the "#drop") is clicked 
     // show the items with class "drg", contained in "#drag" 
     $('#drop #sw').click(function() { 
      $('#drag .drg').slideDown(1000); 
     }); 
    }); 
</script> 

<body> 
<div id="drop"> 
    Drop here &nbsp; &nbsp; &nbsp; &nbsp; <span id="sw">Show</span></div> 
<div id="drag"> 
    Drag these images:<br /> 
    <img src="../../Images/1.jpg" alt="circle" width="45" height="45" class="drg" /> 
    <img src="../../Images/2.jpg" alt="triangle" width="65" height="55" class="drg" /> 
    <img src="../../Images/3.jpg" alt="rhomb" width="70" height="55" class="drg" /> 
    <div class="drg"> 
     DIV with some content. Click and drag</div> 
</div> 

я могу перетащить и падение, но я не в состоянии создать копию на своем первоначальном месте. Также я хочу перетащить только в указанное место.

Спасибо Всех

ответ

0

Вы можете использовать Draggable взаимодействия с JQuery UI.

Эта функция позволяет перетаскивать функциональные возможности любого элемента DOM. Вы можете перемещать перетаскиваемый объект, нажимая на него мышью и перетаскивая его в любом месте окна просмотра.

Посмотрите здесь:

Draggable jQuery UI

+0

Спасибо, но это не то, что я просил –

Смежные вопросы