Cannot redrag a dropped element on a droppable area

Question

Cannot redrag a dropped element on a droppable area

1.3k views Asked by Ashish Santikari At 13 September 2024 at 22:30

I am trying to create a page where I want to drag a button on a place. I want to drag it again if I want to change the position of button. But its not working out.

Here is my code

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.min.css" />
<link rel="stylesheet" href="extern1.css" />
<script type="text/javascript" src="jquery-ui-1.11.2.custom/external/jquery.js>
</script>
<script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="app1.js"></script>
</head>
<body>
<button id="drag" class="btn btn-primary">Drag me</button>
<div id="drop">Drop here</div>
</body>
</html>

Here is app1.js page code

$(function () {
$('#drag').draggable({
    cursor : "move",
    helper : function (event) {
        return $('<div class="col-xs-2"><button class="btn btn-primary check">
Button</button></div>');
    },
    //appendTo : "#drop",
    cancel : false
});
$("#drop").droppable({
    drop : function (event, ui) {
        //clone and remove positioning from the helper element
        var newDiv = $(ui.helper).clone(false)
            .removeClass('ui-draggable-dragging')
            .css({
                position : 'absolute'
            });
        $(this).append(newDiv);
    }
});
})

Original Q&A

There are 1 answers

**T J** · Answer 1 · 2014-11-10 17:31:28

You just need to initialize the cloned element as draggable() as well, as shown below:

$(function() {
  $('#drag').draggable({
    cursor: "move",
    helper: function(event) {
      return $('<div class="col-xs-2"><button class="btn btn-primary check">Button</button></div>');
    },
    cancel: false
  });
  $("#drop").droppable({
    drop: function(event, ui) {
      //clone and remove positioning from the helper element
      var $newDiv = ui.helper.clone(false)
        .removeClass('ui-draggable-dragging')
        .css({
          position: 'absolute'
        }).draggable({ //make it draggable
          cancel: false
        }).appendTo(this);
    }
  });
})

#drop {
  width: 100px;
  height: 100px;
  background: dodgerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<button id="drag" class="btn btn-primary">Drag me</button>
<div id="drop">Drop here</div>

TechQA.

Cannot redrag a dropped element on a droppable area

There are 1 answers

Related Questions in JQUERY

Related Questions in JQUERY-UI

Related Questions in JQUERY-UI-DRAGGABLE

Related Questions in JQUERY-UI-DROPPABLE

Popular Questions

Popular Tags

Trending Questions