CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggablejquery-ui-droppable
ArashShiri
ArashShiri

Reputation: 55

how to make dragged and cloned element draggable again using jquery ui?

I am using Jquery UI and creating drag and drop feature. I have div element which can be dragged and cloned then append the dragged and cloned element to another div element which specified by droppable id.It work properly.I have problem when I want drag elements those have been dragged,cloned and appended in droppable div.

Here is code :

<div>
    <img id="droppable" class="ui-widget-header" alt="64x64" src=""> 
</div>  

<div class="row" id="element">
    <div  class="portlet ui-widget-content draggable" >
      <div class="panel-heading">
           <h3 class="panel-title">element1</h3>
      </div>
    </div>
    <div  class="portlet ui-widget-content draggable" >
        <div class="panel-heading">
           <h3 class="panel-title">element2</h3>
        </div>
    </div>
</div>

Here is js code :

$(function(){
    $('.draggable').draggable({ 
        helper : "clone"
     });
   $('#droppable').droppable({
       accept      : ".draggable",
       drop        : function()
      {
         var dropedItem = $(ui.draggable).clone();
         $(this).append($(ui.helper).clone());
      }
  });  });

Upvotes: 1

Views: 1291

Answers (1)

Runcorn
Runcorn

Reputation: 5226

Looking into your code and running it, I see that the ui used is undeclared causing the error when drop action is performed. Just pass the ui reference when drop is performed it should resolve the issue.

 $('#droppable').droppable({
       accept      : ".draggable",
       drop        : function(event, ui)
      {
         var dropedItem = $(ui.draggable).clone();
         $(this).append($(ui.helper).clone());
      }
  });

See the working Demo here.

Upvotes: 1

Related Questions