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);
}
});
})
You just need to initialize the cloned element as
draggable()
as well, as shown below: