1

JQueryUIのドラッグ可能要素とドロップ可能要素をアクティブ化するのに問題があります。テンプレートには、TwitterBootstrapとJinja2を使用しています。これが私のhtmlです：

      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">communities</li>
          {% for community in communities %}
            <li class='draggable'><a href="http://localhost:8080/users/{{community}}">{{community}}</a></li>
          {% endfor %}         
        </ul>
      </div><!--/.well -->
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
            <li class='droppable'><i class="icon-trash"></i><span class="label label-warning">trash</span></li>   
        </ul>
      </div><!--/.well -->

「コミュニティ」と呼ばれるサイドバーナビゲーションの要素を「ゴミ箱」と呼ばれるサイドバーナビゲーションにドラッグできるようにしようとしています。JQueryは次のとおりです。

$('.draggable a').on('mouseover', function(){
    $(this).draggable();
});

$('.droppable i').on('mouseover', function(){

    drop: function( event, ui) {

        $('#dialog').dialog()

    }

});

コミュニティをアクティブ化するために.on（）を使用した理由は、ユーザーが動的に追加できるようにするためです。このコードで私が抱えている問題は、ドラッグ可能またはドロップ可能がアクティブ化されないことですが、コンソールに移動し、$（'。draggablea'）。draggable（）を使用してドラッグ可能をアクティブ化すると、アクティブ化されます。

この問題は、JQueryの実行後に読み込まれるhtml要素が原因であると推測しました。JQueryをページの最後に移動し、$（document）.ready（function（）{...}）で囲みましたが、効果はありませんでした。次に、スクリプトを$（window）.bind（ "load"、function（）{...}）で囲みましたが、これも効果がありません。

私は途方に暮れていて、いくつかの入力をいただければ幸いです。

4

2 に答える 2

1

まず第一に、あなたの問題はあなたがdroppable()あなたのドロップ可能なコンテナを呼んでいないということかもしれないと私は信じています。指定したJavaScriptはエラーを生成します。これが、ドロップ可能要素とドラッグ可能要素がアクティブ化されていない理由である可能性があります。これが例です、jsfiddle。それはきれいではなく、BootstrapやJinja2を考慮していませんが、それはあなたが何を求めているかを示しています。

そうです、ドラッグ可能およびドロップ可能なjsが、JSを変更する最初のDOMの後に実行されることを確認する必要があります。draggable()イベントに電話したりdroppable()使用したりしても、on()何かが買われるとは思いません。スクリプトの実行後に新しいDOM要素が追加された場合でもon()、それらの要素にもイベントを添付する必要があります。on()何かが足りず、他の理由で必要にならない限り、目的のUIアクションを直接アタッチしてイベントを破棄することもできます。

于 2012-11-09T18:59:54.087 に答える
0

動的に追加された要素にイベントをバインドするには、次のようにon（）メソッドを使用してみてください。

$(document).on( 'mouseover', '.draggable a', function(){
    $(this).draggable();
});

また、コードのドロップ可能な部分についても同様です。

そして第二に、droppableが機能するためには、ドラッグ可能で使用されたのと同じパターンをコードのdroppable部分で使用しないのはなぜですか？したがって、この方法でdroppableを呼び出します。

$(document).on( 'mouseover', '.droppable i', function(){
    $(this).droppable();
});

したがって、dropイベントの代わりに直接droppable（）メソッドを使用します。

于 2012-11-09T19:29:11.747 に答える