JQUERYはドラッグ可能で機能があります

Question

jQueryドラッグ可能関数を初めて使用したいと思います。 私はそのために、このガイドを使用します。

http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

実はすべては明らかですが、私は、私が使用することができますどのAPIを知りません。 jQueryのために 私は、一般的に、最新バージョンのGoogle APIを使用します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

しかし、ドラッグ可能な機能のために、私はこれらの2つのライブラリが必要です。それが含まれているため、二つ目は問題ではありません

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

をdraggableのような機能のみ。しかし、私は、この最初のものにはjQueryが再び含まれていると思います。その結果、関数onは不明です。私はこのようにonを使用します：

$('.1234').on('click', function() {...}) 

私はいくつかの選択肢を試しました。 2番目のものの代わりに最初のものを含めると、ドラッグ可能なイベントは機能しません。初期化はうまくいきますが、DOM要素をドラッグしたいのであれば、私のコンソールでURLに含まれているコードから多くのエラーが出ます。最初のものの代わりに2番目のものを入れると、コンソールは私には（）が不明であると私に伝えます。

誰かがon（）とdraggable（）でjQueryを使用するために必要なURLを知っていますか？

Answer 1

あなたのアプローチにはいくつかの問題があります。

1. あなたはjQueryのの非常に古いバージョンを使用しています。 v1を使用したい場合は、代わりにv1.12を使用してください。 .on()は、バージョン1.7以降では使用できません。
2. jQueryを2回ロードしています。それを一度ロードしてください。さもなければ、レガシーバージョンでマスキングする危険があります。
3. Draggableは2つのgで綴られます。

jQuery v1.xとjQuery UIの最新バージョンを読み込むと動作します。概念実証下記を参照してください：

$(function() { 
 
    $('.draggable') 
 
    .draggable() 
 
    .on('drag', function() { 
 
    console.log('dragged'); 
 
    }) 
 
    .on('click', function() { 
 
    console.log('clicked'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="draggable">Draggable</div>