开发者

Jquery Drag and Drop [closed]

开发者 https://www.devze.com 2022-12-20 23:08 出处:网络
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical andcannot be reasonably answered in its current form. For help clari
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

精彩评论

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

关注公众号