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.
- <!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>