1

私はこれを始めたばかりですが、以下の非常に単純な例をどのように変更して、ドラッグ可能な div がドロップ可能な div に既に配置されている場合にアラートを発生させないようにすることができるか疑問に思っています。

      <script type="text/javascript">
          $(function () {
              $("#draggable-1").draggable();
              $("#draggable-2").draggable();


              $("#droppable").droppable({
                  drop: function (event, ui) {
                      var currentId = $(ui.draggable).attr('id');

                      if (currentId == "draggable-1") {
                          $(this)

                          // would like to prevent this if draggable is already dropped!
                          alert("Adding Item #1.")


                      } else {
                          $(this)
                          alert("Adding Item #2.")
                      }
                  }
              });
          });
      </script>
    <table width="100%"><tr><th>Draggable</th><th>Order Section</th><tr><td>
    <div id="draggable-1">
        <p>Item #1</p>
    </div>

    <div id="draggable-2">
        <p>Item #2.</p>
    </div>

    <div id="droppable">
        <p>Add Your Item</p>  
    </div>
4

2 に答える 2

1

私のために働いた1つの解決策:

var wasInDrop = false;
var finishInDrop = false;
$("#draggable_1").draggable({
    start:  function(event, ui){
            if (! finishInDrop){
                wasInDrop = false;
            }
            finishInDrop = false; //will be set to true if landing in drop.
        },
    stop:     function(event, ui){
            if (finishInDrop && !wasInDrop){
                          alert("Adding Item #1.");
            }
            if (finishInDrop){ wasInDrop=true;}

        }
    });

$("#droppable").droppable({
    drop: function (event, ui) {
        $(this)
        var currentId = $(ui.draggable).attr('id');
        if (currentId == "draggable_1") {
            finishInDrop = true; //for this time.
        }
    });

などなど。次の場合、ドラッグ可能オブジェクトがアラートを発生させるという考え方です。

  1. ドロップ可能な内部で終了します。
  2. ドロップ可能な内部からは始まりませんでした。
于 2012-07-16T20:45:08.857 に答える
1

このフィドルを確認してください: http://jsfiddle.net/100thGear/XfUvS/

位置に少しバグがありますが、目的の効果が得られます。これが役立つかどうか教えてください!

于 2012-07-16T22:47:52.323 に答える