0

私は過去5〜6時間から掘っていて、本当に困っています。オブジェクトの問題に直面していdraggableます。私がしようとしているのは、18 個の小さなドラッグ可能な div を含むポップアップがあることです。これらのドラッグ可能なアイテムをポップアップから 1 つずつドラッグして、ドキュメントの body にドロップする必要があります。ポップアップは、閉じない限りドキュメント内のすべてを実際にフリーズするブートストラップではありません。これは単純な popup です。私がこれまでに試したことはこれです:-

   $("#divLocatePops").find('.original').draggable({
        helper: 'clone'          
   });

   $('#divGeneralLayOutContentBody').droppable({
        accept: '.original',
        drop: function(event, ui) {
            $(this).append($(ui.helper));
        }
   });

クローンオブジェクトをドラッグすることもできますが、クローンは正常に作成されています。divGeneralLayOutContentBodyしかし、 （これは私のドキュメント全体のIDです）にドロップした瞬間、クローンオブジェクトは間違った位置に追加されます。時々それらを見ることさえできませんが、デバッガツールを開くと、DOM でそれらを見ることができます。

もう 1 つ、ドラッグ可能なアイテムに css を適用しました。popup で適切に配置するために、ドラッグ可能なアイテムにtopとを設定しました。leftクローンを作成すると、明らかに同じcssが適用されるため、これがクローンに問題を引き起こしているかどうかはわかりません。しかし、クローン オブジェクトをドラッグし続けると、それも変わります。

どんな助けでも大歓迎です。

これは私が話しているポップアップです。ドラッグ可能な項目 1,2,3,...18 が表示されます

http://prntscr.com/8c3dz9

4

1 に答える 1

0

よし、やっと動くようになった。これが私が試した解決策です

$("#divLocatePops").find('.original').draggable({
    helper: 'clone',
    revert: 'invalid'
});

$('#divGeneralLayOutContentBody').droppable({

    drop: function(event, ui) {
       var cloneTop=ui.helper.offset().top,
           cloneLeft=ui.helper.offset().left,
           containerTop=$(this).offset().top,
           containerLeft=$(this).offset().left;

//remove the `ui-draggable-dragging` class and make position relative
       var newDiv=$(ui.helper).clone(false).removeClass('ui-draggable-dragging').css({
            'position':'relative',
            'top':cloneTop-containerTop,
            'left':cloneLeft-containerLeft
        });

       $(this).append(newDiv); //This is the new div we are appending 
       $(ui.helper).remove();  // remove this cloned helper element 
       $(ui.draggable).draggable('destroy'); //destroy the draggable event on draggable element. This is done because once the element has been dragged , I don't want it to be dragged again . 
       newDiv.draggable(); //I want the appneded element draggable too
    }
});

そして、これは魅力のように機能します。ハッピーコーディングガイズ!! :)

于 2015-09-03T20:40:40.430 に答える