CODEWITHSUNDEEP
jquery
Sulthan
Sulthan

Reputation: 374

jQuery draggable clone is not working

jQuery Draggable clone not working. I tried searching. but I couldn't find the solution.

HTML

<div id="start">
</div>

Script

$("#start").draggable({
    helper: 'clone'
});

Style

#start {
    margin:10px;
    height:60px;
    width:100px;
    border:solid 2px #FD9395;
    border-radius:50%;
    background-color:#DBFC99;
    z-index:100;
}

Without {helper:'clone'}, the code is working perfect. After adding the helper attribute, div is not draggable.

Upvotes: 0

Views: 619

Answers (1)

j08691
j08691

Reputation: 208032

Actually your code works just fine, it's just that the cloned element has no styling so you never see it (it's not an exact clone and doesn't clone the ID of your original element).

The cloned element gets a few classes automatically (ui-draggable-dragging and ui-draggable) so you can style them and see it work. E.g.

.ui-draggable {
  margin: 10px;
  height: 60px;
  width: 100px;
  border: solid 2px #FD9395;
  border-radius: 50%;
  background-color: #DBFC99;
}

jsFiddle example

Upvotes: 2

Related Questions