2

jQueryUI をいじるための単純なフォーム ビルダーを作成しています。ドラッグ可能にした画像と同じように、ヘルパー「クローン」に設定されたフォーム要素のリストがあります。また、ドロップ イベントを設定して、ドロップされた画像の ID を読み取り、適切なフォーム要素を作成してドロップ可能な領域に追加するドロップ可能な領域もあります。新しい要素を追加したら、ドラッグ可能に設定します。問題は、クラス ui-draggable を持つ新しい要素にもかかわらず、一度ドラッグ可能が呼び出されたにもかかわらず、ドラッグ可能ではないことです。作成したらドラッグできるようにしたいです。

コードは次のとおりです。

var itemCount = 1;
var idToAdd;
var itemToAdd;

$(document).ready(function(){
    $(".draggable").draggable({
        opacity:0.5,
        helper: "clone"
    });

     $(".form_builder").droppable(
        {
                activeClass: "droppable_dragged",
                drop: function(e, ui){
                    var dropped_item = ui.draggable;
                    switch($(dropped_item).attr("id")){
                        case "text_box":
                            idToAdd = "textBox" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='text' />";
                            break;
                        case "text_area":

                            break;
                        case "radio":
                            idToAdd = "radio" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='radio' />";
                            break;
                        case "check":
                            idToAdd = "check" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='check' />";
                            break;
                        case "dropdown":

                            break;
                        case "file":
                            idToAdd = "file" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='file' />";
                            break;
                        case "button":
                            idToAdd = "button" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='submit' />";
                            break;
                    }
                    itemCount++;
                    $(this).append(itemToAdd);
                    $("#" + idToAdd).draggable();
                }

            });
});
4

5 に答える 5

3

更新それが機能しない理由は、入力が何らかの形でドラッグ イベントを妨害するためです。これは、落としたという事実とは何の関係もありません。要素にパディングを追加しましたが、パディングをドラッグすると機能します: http://jsfiddle.net/7HUt2/4/

  1. 変数のスコープを制限してみてください。

    drop: function(e, ui){
   var itemToAdd;
   ...
}

    これにより、他の同時イベントによってプログラム フローが損なわれることがなくなります。

  2. オブジェクトを直接参照できる場合は、オブジェクトをシークしないでください。

    itemToAdd = '<input type="..."/>'; //No id necessary at this point.   
$(itemToAdd).appendTo(this).draggable();

これにより、はるかに堅牢になります

于 2012-04-04T20:42:49.297 に答える
1

新しい要素をどこに追加しても、プラグインを再度適用する必要があります。動的に追加された要素は、次のように自分自身をどこに接続するかわからないためです。

 //here you add the elements with class draggable 
 $(".draggable").draggable({
      //settings here
  });
于 2012-04-04T20:34:43.840 に答える
0

変更してみてください

$('body').append(itemToAdd)

に

$('body').append(itemToAdd).find('.draggable').draggable()

または

$('body').append(itemToAdd);
$('.draggable').draggable();
于 2012-04-04T20:41:34.047 に答える
0

プラグインが動的に追加された要素に影響を与えるには、次のような.on()メソッド ( jQuery v1.7.x 以降で.on()置き換えられます) を使用できます。.live()

$('body').on("focusin", function(){
    $(".draggable").draggable({
        opacity:0.5,
        helper: "clone"
    });
}); // on

Chrome で問題を並べ替えるには、tabindex="1"各要素に属性を追加しますclass="draggable"。他のプラグインにも同じ問題があり、それが回避策でした。

これを参考にチェック

この回避策を使用すると、提案どおりに新しい要素を追加した後にプラグインを再度呼び出す必要はありません。

于 2012-04-04T20:58:57.060 に答える
0

.draggable の呼び出しは既存の DOM にのみ影響し、将来の DOM 要素には影響しません。したがって、ドラッグ可能にしたい新しい要素を追加した後、再度呼び出す必要があります。

于 2012-04-04T20:37:00.337 に答える