Response title
This is preview!
Draggable jumps at the first drag
in Using jQuery UI
•
10 years ago
Please refer to this jsFiddle example. I want the draggable being dragged into the sortable section so it could be sorted.
At the first time dragging the draggable, it jumps out of viewable area. Yet it is still draggable. It just doesn't stick to mouse cursor.
There is a very similar demo on jQuery UI's website. Somehow it doesn't have such an issue.
The following code is the HTML page of my example. It could also be downloaded at here.
The following code is the HTML page of my example. It could also be downloaded at here.
- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body { margin: 0 auto; padding: 50px 0; width: 80px }
.sortable { margin-bottom: 50px; }
.sortable div { margin-bottom: 10px; width: 80px; height: 30px; background: lightblue }
.draggable { width: 80px; height: 30px; cursor: move; background: lightgreen }
.sortable .draggable { background: lightgreen }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('.sortable').sortable({
revert: true
});
$('.draggable').draggable({
connectToSortable : '.sortable',
revert : 'invalid'
});
$('.draggable').disableSelection();
});
</script>
</head>
<body>
<div class="sortable">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="draggable">Draggable</div>
</body>
</html>
1
