2

現在のDOMは次のようになります。

<div id="image_list">

</div>

イベントの後、これは次のように更新されます：

<div id="image_list">
   <img class="dragable-img" src="image1.png" />
   <img class="dragable-img" src="image2.png" />
   <img class="dragable-img" src="image3.png" />
   <img class="dragable-img" src="image4.png" />
 </div>

これで、ドラッグを処理することになっているjsがページにあります

$('.dragable-img').draggable({
        revert: true,
            handle: 'img',
            containment: "#content-body", 
            scroll: false
 }).disableSelection();

明らかに、DOMを更新する前は機能しており、その後は機能していません。だから、私はここで何が欠けていますか？

4

2 に答える 2

2

ajaxComplete（）関数を使用してみてください-ページでajaxを呼び出すたびにトリガーされます

$('#image_list').ajaxComplete(function(){
    $('.dragable-img',this).draggable({
        revert: true,
        handle: 'img',
        containment: "#content-body", 
        scroll: false
    }).disableSelection();
)};

より良い方法は、$。ajax成功関数内でドラッグ可能を再度呼び出すことです。

$.ajax({
    url:yoururl
    success: function(){
       //do what you need.. update/add to your dom 
       //then call draggable on your elements
       $('.dragable-img').draggable({
           revert: true,
           handle: 'img',
           containment: "#content-body", 
           scroll: false
       }).disableSelection();
    }
});
于 2012-11-30T22:11:14.843 に答える
1

これが機能するかどうかを確認します。

$('#image_list').on('draggable', '.dragable-img' , function(){
   return {
            revert: true,
            handle: 'img',
            containment: "#content-body", 
            scroll: false
   }

}).disableSelection();

これが機能しない場合は、要素がDOM.draggable()に挿入された後に使用してみてください。

于 2012-11-30T21:41:52.780 に答える