jQuery draggable is not working within a particular div
Question
I'm trying to create a draggable div with jQueryUI & Bootstrap. I have created the draggable div, But if drop the draggable div in another div, It is no longer movable. (the second div is not a droppaable one.)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="all">
<link href="assets/css/custom.css" rel="stylesheet" media="all">
<script type="text/javascript" src="assets/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="content">
<div class="row"></div>
<div class="draggable-divs col-md-12">
<div class="elem col-md-1">
<a href="#"><span class="glyphicon glyphicon-move pull-right"></span></a>
FILL
</div>
<div class="elem col-md-1">
<a href="#"><span class="glyphicon glyphicon-move pull-right"></span></a>
FILL
</div>
</div>
<div class="row">
<div class="drop col-md-12">
Drop Me Here
</div>
</div>
</div>
<script>
$(document).ready(
function(){
$('.elem').draggable(
{ appendTo: 'body' }
);
}
);
</script>
</body>
</html>
Can anyone help me out here?
1 answers
solution1
3 ACCPTED 2015-02-06 10:29:12
drop has higher z-index than the elem . You're not dropping your draggable items on the div, but below. So then you can't drag it again.
You could set an high z-index value for the draggable items to make sure they're above anything else, or set pointer-events: none; for the element you drop on.
This should explain what is happening in your code (to see the difference, uncomment one of the styles):
$('.elem').draggable( { appendTo: 'body' } );
.drop{ /* pointer-events: none; */ background : red; } .elem{ /* z-index: 3000; */ background : grey; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <div class="content"> <div class="row"> <div class="draggable-divs col-md-12"> <div class="elem col-md-12"> <a href="#"><span class="glyphicon glyphicon-move pull-right"></span></a> FILL </div> <div class="elem col-md-1"> <a href="#"><span class="glyphicon glyphicon-move pull-right"></span></a> FILL </div> </div> </div> <div class="row"> <div class="drop col-md-12"> Drop Me Here </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.