web-dev-qa-db-ja.com

JQueryUIなしでドラッグアンドドロップ

JQueryのみ（UIなし）でのドラッグアンドドロップのチュートリアルを見つけるためにたくさん検索しましたが、JQuery UIの人気により、すべてのドラッグアンドドロップ機能はJQueryUIに基づいています。

JQueryによる基本的なドラッグアンドドロップをスタンドアロンにする方法のヒントを誰かに教えてもらえますか？

javascriptjquerydrag-and-dropdraggable
16
Googlebot

良い出発点は、プロセスを計画してから、各ユーザーアクションに使用する必要があるjQueryツールを決定することだと思います。

したがって、ユーザープロセスは次のようになります。

  • 「ドラッグ可能な」領域でコンテンツdivをクリックします
  • コンテンツをドラッグすると、そのdiv内にコンテンツが保持されます
  • マウスを放すと、コンテンツが「ドロップ可能な」コンテナに入れられ、ドロップ可能なサイズに合うように前のコンテンツのサイズが調整されます。

次のタイプのイベントリスナーが必要です。

  • マウスアップ
  • マウスダウン
  • アニメート

少なくとも。もう1つのオプションは、jQuery UIソースをチェックして、どのように実行されるかを確認することです。これは正確に何をすべきかを教えてくれますが、必要に応じて追加またはトリミングすることができます。

8
Evan

使用できるプラグインがいくつかあります。以下をご覧ください。

http://wayfarerweb.com/jquery/plugins/animadrag/

http://threedubmedia.com/code/event/drag/demo/

それはまだjqueryですが、UIはありません

12
COLD TOLD

これは非常に便利だと思いました： http://draggabilly.desandro.com/

3
Yousef Salimpour

http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery

これを参照してください。これはコアJSであり、実装が簡単です。

3
thezillion

同じ問題が発生しました。ドラッグ可能とドロップ可能のみの縮小されたjqueryUIの33.4キロバイトは、必要な機能が制限されるには大きすぎます。以下のアプローチは機能するコードではありません-何が起こる必要があるかを視覚化するための単純な構造です。

$('.draggable').on{
  mousemove : function(){
    var mouseposition = { // this also needs to account for onclick offset of pointer vis-a-vis element
        x : pageX,
        y : pageY 
    };
    $(this).css({
      top : mouseposition.y,
      left : mouseposition.y
    });
  if( // this statement is kinda bogus, idea is to perform a collision detection via coordinate comparison
    $('.draggable').offset().top < $(.droppable').offset().top 
    &&
    $('.draggable').offset().left < $(.droppable').offset().left
  ) {
      alert('the item has been dropped');
  }
  }
});
2
tim

これは古い投稿だと理解していますが、JqueryUIなしでこれを行うことにも興味がありました。上記のリンクを確認しました しかし、これが最良であることがわかりました 。縮小されたのはわずか8kb（UIソート可能〜30、私は読んだ）であり、巨大なJQueryライブラリから独立しています（ただし、これらは私たちの生活を楽にすることがあります）。

1
Todd

回答に基づく： https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui

並べ替えについては、おそらく次を参照してください： http://johnny.github.io/jquery-sortable/

var draggable = $('#dragit'); //element 

draggable.on('mousedown', function(e){
        var dr = $(this).addClass("drag").css("cursor","move");
        height = dr.outerHeight();
        width = dr.outerWidth();
        ypos = dr.offset().top + height - e.pageY,
        xpos = dr.offset().left + width - e.pageX;
        $(document.body).on('mousemove', function(e){
                var itop = e.pageY + ypos - height;
                var ileft = e.pageX + xpos - width;
                if(dr.hasClass("drag")){
                        dr.offset({top: itop,left: ileft});
                }
        }).on('mouseup', function(e){
                        dr.removeClass("drag");
        });
});
#dragit
  {
    background: red;
    width: 50px;
    height: 50px;
    cursor: move;
    position: relative;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dragit">Drag me</div>

動きを制限する

var draggable = $('#dragit-contained'); //element 

draggable.on('mousedown', function(e){
        var dr = $(this).addClass("drag").css("cursor","move");
        height = dr.outerHeight();
        width = dr.outerWidth();
        max_left = dr.parent().offset().left + dr.parent().width() - dr.width();
        max_top = dr.parent().offset().top + dr.parent().height() - dr.height();
        min_left = dr.parent().offset().left;
        min_top = dr.parent().offset().top;

        ypos = dr.offset().top + height - e.pageY,
        xpos = dr.offset().left + width - e.pageX;
        $(document.body).on('mousemove', function(e){
                var itop = e.pageY + ypos - height;
                var ileft = e.pageX + xpos - width;
                
                if(dr.hasClass("drag")){
                        if(itop <= min_top ) { itop = min_top; }
                        if(ileft <= min_left ) { ileft = min_left; }
                        if(itop >= max_top ) { itop = max_top; }
                        if(ileft >= max_left ) { ileft = max_left; }
                        dr.offset({ top: itop,left: ileft});
                }
        }).on('mouseup', function(e){
                        dr.removeClass("drag");
        });
});
.draggable-area
  {
    background: grey;
    width: 320px;
    height: 240px;
  }
#dragit-contained
  {
    background: red;
    width: 50px;
    height: 50px;
    cursor: move;
    position: relative;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="draggable-area">
        <div id="dragit-contained">Drag me</div>
</div>
1
CrandellWS