Ticket #1553 (closed bug: wontfix)
Error in offset position when dragging element more than once
| Reported by: | pragueexpat | Owned by: | paul |
|---|---|---|---|
| Priority: | undecided | Milestone: | |
| Component: | ui | Version: | 1.1.3 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
I have a draggable (helper = clone) div that can be dragged to one of several droppable divs. The start function of the drag records the start position of the draggable div using offset(). The first drag records the position correctly. The second is not correct. The third is correct, the fourth is not correct, etc. The incorrect positions are all reported as the same value (its off by 14 pixels to the right)
ui.mouse.js, ui.draggable.js, ui.droppable.js are from new jQueryUI August 28,2007
contact:pragueexpat <at> hotmail.com
Explanation of sample code:
Open this file in Firefox (it uses the console.log of firebug). Drag the red dot to any of the green dots. The console will log the starting position of the red dot div when you start the drag. Notice that every even numbered time you drag the red dot, the position is incorrect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/lib/jquery/jquery-1.1.3.1.js"></script>
<script type="text/javascript" src="/lib/jqueryui/ui.mouse.js"></script>
<script type="text/javascript" src="/lib/jqueryui/ui.draggable.js"></script>
<script type="text/javascript" src="/lib/jqueryui/ui.droppable.js"></script>
<script type="text/javascript" src="/lib/jquerydimensions/jquery.dimensions.js"></script>
<style type="text/css">
.container{
border:1px solid blue;
position:absolute;
z-Index:100;
width:300px;
height:60px;
}
#textInput1_container{
top:25px;
left:500px;
}
#textInput2_container{
top:25px;
left:50px;
}
#textInput3_container{
top:100px;
left:50px;
}
#textInput4_container{
top:175px;
left:50px;
}
#textInput5_container{
top:250px;
left:50px;
}
#textInput6_container{
top:100px;
left:500px;
}
#textInput7_container{
top:175px;
left:500px;
}
.dd{
display:inline;
border:1px solid green
}
</style>
</head>
<body>
<div id="textInput1_container" class="container">
Enter text: <input type="text" id="textInput1" name="textInput1" size="40" />
<div id="drag_textInput1" class="dd drag">
<img src="/images/dragzone.jpg" />
</div>
</div>
<div id="textInput2_container" class="container">
Enter text: <input type="text" id="textInput2" name="textInput2" size="40" />
<div id="drop_textInput2" class="dd drop">
<img src="/images/dropzone.jpg" />
</div>
</div>
<div id="textInput3_container" class="container">
Enter text: <input type="text" id="textInput3" name="textInput3" size="40" />
<div id="drop_textInput3" class="dd drop">
<img src="/images/dropzone.jpg" />
</div>
</div>
<div id="textInput4_container" class="container">
Enter text: <input type="text" id="textInput4" name="textInput4" size="40" />
<div id="drop_textInput4" class="dd drop">
<img src="/images/dropzone.jpg" />
</div>
</div>
<div id="textInput5_container" class="container">
Enter text: <input type="text" id="textInput5" name="textInput5" size="40" />
<div id="drop_textInput5" class="dd drop">
<img src="/images/dropzone.jpg" />
</div>
</div>
<div id="textInput6_container" class="container">
Enter text: <input type="text" id="textInput6" name="textInput6" size="40" />
<div id="drop_textInput6" class="dd drop">
<img src="/images/dropzone.jpg" />
</div>
</div>
<div id="textInput7_container" class="container">
Enter text: <input type="text" id="textInput7" name="textInput7" size="40" />
<div id="drop_textInput7" class="dd drop">
<img src="/images/dropzone.jpg" />
</div>
</div>
<script type="text/javascript">
$(function(){
$('.dragdiv').draggable();
$('.drop').each(function(){createDropTarget($(this))});
$('.drag').each(function(){createDragTarget($(this))});
});
createDropTarget = function(jObj){
(jObj).droppable({accept:'.drag',tolerance:'intersect',greedy:true});
}
createDragTarget = function(jObj){
(jObj).draggable({helper:'clone',start:function(){
var tmp = $('#'+this.id).offset();
console.log(tmp);
}});
}
</script>
</body>
</html>
Change History
comment:2 Changed 6 years ago by paul
- Status changed from new to closed
- Resolution set to wontfix
The cloning of the helper also clones the id of the original because of css reasons. Therefore, this is not a bug, but it reports from time to time the helper position. Please use $(this) for a real reference to the original to avoid this.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Sorry, just realized that the images 'dragzone.jpg' and 'dropzone.jpg' are not attached. The first div is the draggable and the rest are droppable.