2

HTML5のドラッグアンドドロップ関数を使用せずに、自分のWebサイトのドラッグアンドドロップ関数を作成しようとしています。ドラッグ部分はわかりましたが、特定のドロップエリアにドロップできません。これが私のコードです：jQuery UI

HTML

<ul id="grid">
     <li class="drop">
          <div class="drag" id="el_1"><div>
     </li>
     <li class="drop">
          <div class="drag" id="el_2"><div>
     </li>
     <li class="drop">
          <div class="drag" id="el_3"><div>
     </li>
     <li class="drop"></li>
     <li class="drop"></li>
     <li class="drop"></li>
</ul>
<script>
     $(function() {
          $('.handle').mousedown(drag_and_drop);
     });
</script>

CSS

#grid{
     position:relative;
     width:360px;
     height:auto;
}
.drop{
     width:100px;
     height:100px;
     margin:10px;
}
.drag{
     position:absolute;
     width:100px;
     height:100px;
}
#el_1{ top:10px; left:10px}
#el_2{ top:10px; left:130px}
#el_3{ top:10px; left:250px}

脚本

function drag_and_drop(e){
        var drag = $(this);
        var drop = drag.parent();

        drag.addClass('draggable');

        drag_h = drag.outerHeight(),
        drag_w = drag.outerWidth(),
        pos_y = drag.offset().top + drag_h - e.pageY,
        pos_x = drag.offset().left + drag_w - e.pageX;

        $('.draggable').css('z-index', 9000).mousemove(function(e) {

/*

IN THIS MOUSEMOVE FUNCTION IS THERE ANY WAY TO DETECT IF THE DRAGGABLE DIV IS "HOVERING" OVER THE li.drop ELEMENTS?

*/

            $('.draggable').offset({
                top: e.pageY + pos_y - drag_h,
                left: e.pageX + pos_x - drag_w

            }); 
        }).mouseup(function() {
            drag.removeClass('draggable');
        });   
    e.preventDefault(); // stops the browser default drag method    
};

オブジェクトをドラッグし始めたら、それが特定のli.dropの上にあるかどうかを検出できる方法はありますか？そこからオブジェクトをドロップできますか？

4

1 に答える 1

0

以下を使用して現在のマウスの位置を取得し、別の関数を記述して、その位置がドロップ可能なdivの範囲内にあるかどうかを確認できます。ここに良い記事：

http://docs.jquery.com/Tutorials:Mouse_Position#How_do_I_find_the_mouse_position.3F

于 2012-12-18T21:11:45.937 に答える