5

サイズ変更可能な Droppable 内の JQueryUI Draggable が機能しません。アイデアは、ドロップされた要素のサイズを変更して、ドラッグアンドドロップされた要素をdivにドラッグできるようにすることです。

作業コード: http://jsfiddle.net/lukaszjg/GvDLh/

問題を再現する手順:

  1. 「ドラッグミー」を「ドロップする場所」にドラッグします
    1. リサイズしてみる
    2. 「ドロップする場所」内にドラッグされた要素をドラッグしてみてください
    3. ドラッグした要素のサイズをもう一度変更してみてください - 期待どおりに動作していません

#dragme と #droppable が対応する div を参照する以下のコードを見つけてください。それを修正する方法はありますか？

$("#dragme").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'

});

var x = null;
$("#droppable").droppable({
drop: function(e, ui) {

x = ui.helper.clone();

x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});

x.resizable();
x.appendTo('#droppable');
ui.helper.remove();
}
});
4

3 に答える 3

2

サイズ変更可能なウィジェットを要素にバインドすると、いくつかの<div class="ui-resizable-handle">要素が追加されます。次に、dropコールバック内に次のようになります。

x = ui.helper.clone();

これにより、複製する.ui-resizable-handle要素だけでなく、要素も複製されます。そして数行後、次のようになります。

x.resizable();

どうやらその呼び出しは.ui-resizeable-handle要素の存在によって混乱します。最終的に要素のセットが追加され.ui-resizeable-handleますが、おそらくz-indexの問題が原因で機能しません。元の要素は（おそらく）それらの上にあり、すべてのイベント.ui-resiable-handleがイベントハンドラーがアタッチされている要素に到達するのをブロックします。彼ら。<div>クローンのサイズを変更する前に、問題のあるを手動で削除する場合：

x.find('.ui-resizable-handle').remove();
x.resizable();

それからそれは働きます：

$("#droppable").droppable({
    drop: function(e, ui) {
        x = ui.helper.clone();
        x.draggable({
            helper: 'original',
            containment: '#droppable',
            tolerance: 'fit'
        });
        x.find('.ui-resizable-handle').remove();
        x.resizable();
        x.appendTo('#droppable');
        ui.helper.remove();
    }
});

更新されたフィドル：http：//jsfiddle.net/ambiguous/xZECa/

サイズ変更できないx.resizable('destroy')ため、クリーンアップするために呼び出すだけでは機能せず、何も起こりません。x

これを機能させるためのより良い方法があるはずですが、それがまだ何であるかはわかりません。

于 2011-09-18T08:14:03.683 に答える
2

私はあなたの解決策を試すのに苦労しましたが、あなたは私を途中に置いたので、私の問題と解決策を説明します。

私の場合: 各従業員を表すドロップ可能な div と、タスクを表すドラッグ可能でサイズ変更可能な div を含む計画。

問題: まったく同じですが、私の「タスク」は既にドロップ可能な (データベースからのもの) の子であり、多くの .data() のものがあるため、クローン作成は混乱していました。ドロップ可能なドロップ イベントは、「javascript 引数を変換できません」というエラーをスローし、それ以上のドラッグをブロックしてアプリを台無しにします。

あなたのソリューションを見て、私の場合はそれを再現できなかった後、私は基本に戻りました：

「木こりのIQを持っているなら、斧を使ってください」.

だからここにものがあります：

$("#dragme").draggable({
helper: 'original', //Needed in my case
cursor: 'move',
tolerance: 'fit',

start: function(event,ui){
$(this).resizable( "destroy" );/* The resizable generates troubles to the droppable?
Well let's remove the problem...
*/
} 

}).resizable({
/*All my functions to apply to the task when resized*/

});// I'm creating the resizable immediately because needed to attribute more or less time to the task 


$("#droppable").droppable({
drop: function(e, ui) {
/*All my drop functions to manage the task*/

//creating the resizable again PROBLEM SOLVED
$(ui.draggable).resizable({
/*All my functions to apply to the task when resized*/
});

}
});

これが役立つことを願っています

注: 私の英語レベルはよくわからないので、間違いやスペルミスがあった場合は、「基本に戻る」セクションを参照してください。ご容赦ください ;-)。

于 2012-04-28T11:19:16.360 に答える
0

「.resizable()」を要素にアタッチしたら、最初にイベントを破棄してからアタッチします。それが動作します。//$(ele) はオブジェクトです。



    $(ele).resizable().resizable("destroy");
        $(ele).draggable();
        $(ele).resizable({
          animate: 'true',
          ghost: 'true',
          handles: 'ne, nw, se, sw',
    });
于 2014-07-22T07:55:07.847 に答える