html jQuery w/out Draggableを使用したドラッグアンドドロップ

Question

draggableビヘイビアを使用せずにjQueryを使用してdrag'n'drop impleplementationの最小限の例を投稿できますか？私の理解では、それは10行をはるかに超えてはならない。

私は、次のHTMLをしました：

<div id="container" style="width:500px; height:500px;"> 
    <div id="draggable" style="width:10px; height:10px; background-color:blue;" /> 
</div> 

が、私はそう青いsqureをドラッグできるようにしたいです。

私の実装はうまくいきましたが、それはむしろ怪物に見えるので、私はあなたからクラスのタッチを取得したいと思います。

Answer 1

これは、私はそれを行うだろうかです：

$('#draggable').on('mousedown', function (evt) { 
    var offset = {x: evt.offsetX || evt.originalEvent.layerX, y: evt.offsetY || evt.originalEvent.layerY}; 

    // bind mousemove only if dragging is actually happening 
    $(document).on({ 
    // delegate the mousemove event to the draggable element 
    'mousemove.drag': $.proxy(function(evt) { 
     $(this).css({left: evt.pageX - offset.x, top: evt.pageY - offset.y}); 
    }, this), 

    // unbind namespaced events on mouseup 
    'mouseup.drag': function (evt) { 
     $(document).off('.drag'); 
    } 
    }); 

    return false; 
}); 

デモ：http://jsfiddle.net/sXahK/6/

Answer 2

「ドラッグ可能でない」とは、jQuery UIを使用しないことを意味します。

これは完全ではありませんが、始めるには十分であるはずです。例えば、コンテナへのドラッグを制限しません。

ここにはworking exampleがあります。