javascript - Weird offset in jquery ui draggable - Stack Overflow

admin管理员组

文章数量:1332890

I've got a main div, 150px wide by 500px tall, with an overflow of auto (or scroll) which is holding a bunch of images, thus:

<div id="images" style="width: 150px; height: 500px; overflow: scroll;">
    <img src="images/swift1.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift2.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift3.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift4.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift5.png" style="width: 150px; height: 150px;" />
    <img src="images/swift6.JPG" style="width: 150px; height: 150px;" />        
</div>

I've implemented JQuery UI draggable to drag images out of this div into another div and drop them.

$('#images img').draggable({  
    revert:true,  
    proxy:'clone',
    snap: true,
    onDrag: function(e, ui) {
        console.log('test');
    }
}); 
$('.drop_image').droppable({  
    onDragEnter:function(){  
        $(this).addClass('over');       
    },  
    onDragLeave:function(){  
        $(this).removeClass('over');  
    },  
    onDrop:function(e,source){  
        $(this).removeClass('over');  
        if ($(source).hasClass('assigned')){  
            $(this).append(source);  
        } else {  
            var c = $(source).clone().addClass('assigned');  
            $(this).empty().append(c);  
            c.draggable({  
            revert:true  
            });  
        $(this).children('img').css('width', '100%').css('height', '100%');
        }  
    }  
    }); 

However, because of the scroll on the div, any images which are below the initial bottom border of #images, when dragged, are considerably away from the mouse cursor by whatever offset they had in the original div. They still get dropped correctly when the mouse is placed over the receiving div, but the dragged image displays in a weird place until it is dropped.

Anyone know a way to correct this? I assume I have to do something in the onDrag callback to set the position of the dragged object to be equal with the mouse cursor position, but I'm not sure what the syntax should be.

I've got a main div, 150px wide by 500px tall, with an overflow of auto (or scroll) which is holding a bunch of images, thus:

<div id="images" style="width: 150px; height: 500px; overflow: scroll;">
    <img src="images/swift1.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift2.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift3.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift4.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift5.png" style="width: 150px; height: 150px;" />
    <img src="images/swift6.JPG" style="width: 150px; height: 150px;" />        
</div>

I've implemented JQuery UI draggable to drag images out of this div into another div and drop them.

$('#images img').draggable({  
    revert:true,  
    proxy:'clone',
    snap: true,
    onDrag: function(e, ui) {
        console.log('test');
    }
}); 
$('.drop_image').droppable({  
    onDragEnter:function(){  
        $(this).addClass('over');       
    },  
    onDragLeave:function(){  
        $(this).removeClass('over');  
    },  
    onDrop:function(e,source){  
        $(this).removeClass('over');  
        if ($(source).hasClass('assigned')){  
            $(this).append(source);  
        } else {  
            var c = $(source).clone().addClass('assigned');  
            $(this).empty().append(c);  
            c.draggable({  
            revert:true  
            });  
        $(this).children('img').css('width', '100%').css('height', '100%');
        }  
    }  
    }); 

However, because of the scroll on the div, any images which are below the initial bottom border of #images, when dragged, are considerably away from the mouse cursor by whatever offset they had in the original div. They still get dropped correctly when the mouse is placed over the receiving div, but the dragged image displays in a weird place until it is dropped.

Anyone know a way to correct this? I assume I have to do something in the onDrag callback to set the position of the dragged object to be equal with the mouse cursor position, but I'm not sure what the syntax should be.

• javascript
• jquery
• css
• jquery-ui
• jquery-ui-draggable

Share Improve this question Follow asked Aug 5, 2012 at 16:40 rosalindwillsrosalindwills 1,4941616 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

cursorAt: { left: 75, top: 75 },

http://jsfiddle/E9pQZ/

see the API docs http://api.jqueryui./draggable/#option-cursorAt

本文标签： javascriptWeird offset in jquery ui draggableStack Overflow