开发者

Jquery Drag and Drop [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 12 years ago.

$(document).ready(function() {

            $("#dvv").mousedown(function() {

                $("#dvv").mousemove(function(e) {

                    $("#dvv").css({ 'margin-top': e.pageY - 15, 'margin-left': e.pageX - 15 });

                });

            });

<div id="dvv" style="background-color: Blue; width: 150px; height: 150px; margin: 250px 550px;
        cursor: move;">
        te开发者_如何学Cst Div
    </div>

Div Click nonstop drag help me


Please note: I've never tried to implement this before, but this seems like a start.

Please note that I removed the margins from your div, and added absolute positioning, so it is not the original element you started with.

Hopefully this will give you something to work with.

UPDATE: Just changed it a bit. Now, using offset(coordinates) instead of css, it works regardless of margin settings, and absolute positioning doesn't need to be set.

<div id="dvv" style="background-color: Blue; width: 150px; height: 150px; margin: 0; cursor: move;">
test Div
</div>

$("#dvv").mousemove(function(e) {
    if($(this).hasClass('moving')) {
        $(this).offset({ 'top': (e.pageY - $(this).data('offsety')), 'left': (e.pageX - $(this).data('offsetx')) });
    }
});

$("#dvv").mousedown(function(event) {
    $(this).data('offsetx', (event.pageX - $(this).offset().left) );
    $(this).data('offsety', (event.pageY - $(this).offset().top) );
    $(this).addClass('moving')

});

$("#dvv").mouseup(function() {
    $(this).removeClass('moving')
});


Check out jQueryUI. It has a "draggable" and a "droppable" component that will get you going with plenty of examples.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜