0

UI や他のプラグインなしでドラッグ可能な div を作成しました。しかし、ドロップ可能なdivを作成できないという大きな問題があります。これが私のコードです:

$(function() {
    $(".dragIt").on("mousedown", function(e) {
        var $dragIt = $(this).addClass('draggable');
        var z_idx = $dragIt.css('z-index'),
            dragHeight = $dragIt.outerHeight(),
            dragWidth = $dragIt.outerWidth(),
            positionY = $dragIt.offset().top + dragHeight - e.pageY,
            positionX = $dragIt.offset().left + dragWidth - e.pageX;
        $dragIt.css('z-index', 1000).parents().on("mousemove", function(e) {
            $('.draggable').offset({
                top: e.pageY + positionY - dragHeight,
                left: e.pageX + positionX - dragWidth
            });
        });
        e.preventDefault();
    }).on("mouseup", function(e) {
        $(this).removeClass('draggable');
    });
});​

私は次のようないくつかの方法を試しました:

if ( $('.dragIn').position() < $('.dropIn').position() ) {console.log('dropped');}

しかし、うまくいきません。解決策はありますか?前もってありがとう!

4

1 に答える 1

1

原則として、より効率的でない限り、機能を再作成しません。UI プラグインを使用することをお勧めしますが、これで正しい道をたどることができます。

http://jsfiddle.net/sgy9u/7/を参照

HTML:

<div class="dragIt">Draggable</div>
<div class="dropIt">Drop Here</div>

Jクエリ:

$(function() {
$(".dragIt").on("mousedown", function(e) {
    var $dragIt = $(this).addClass('draggable');
    var z_idx = $dragIt.css('z-index'),
        dragHeight = $dragIt.outerHeight(),
        dragWidth = $dragIt.outerWidth(),
        positionY = $dragIt.offset().top + dragHeight - e.pageY,
        positionX = $dragIt.offset().left + dragWidth - e.pageX;
    $dragIt.css('z-index', 1000).parents().on("mousemove", function(e) {
        $('.draggable').offset({
            top: e.pageY + positionY - dragHeight,
            left: e.pageX + positionX - dragWidth
        });
    });
    e.preventDefault();
}).on("mouseup", function(e) {
//changes to your code start here
    var dragOff=$('.draggable').offset();
    var off=$('.dropIt').offset();
    var height=$('.dropIt').height();
    var width=$('.dropIt').width();

    //checking the boundaries of dropIt and recording 'dropped' to the console
    if(dragOff.left>=off.left && dragOff.left<=off.left+width
       && dragOff.top>=off.top && dragOff.top <=off.top+height)
        console.log('dropped'); 
//changes to your code end here
    $(this).removeClass('draggable');
});
于 2012-09-26T17:37:51.170 に答える