1

以下のコードを使用して、ドラッグした要素をドロップしたときに ajax リクエストをトリガーしようとしていますが、機能しません。実際にIDを取得していないためだと思いますが、よくわかりません。

HTML:

<div class="draggable">item 1</div>
<div class="draggable">item 2</div>
...

<div class="droppable">drop location 1</div>
<div class="droppable">drop location 2</div>
...

jQuery:

$(document).ready(function() {
  $(".draggable").draggable({cursor: 'move', helper: 'clone'});

  var ID1 = $(".draggable").attr(id);
  var ID2 = $(".droppable").attr(id);

  $(".droppable").droppable({
    drop: function() { 
        $.ajax({
            type: "POST",
            url: 'www.mydomain.com/'+ID1+'/'+ID2,
            dataType: 'html',
            success: function(){}
        });
        return false;
     }
  });
});
4

2 に答える 2

0

ajon の答えは正しくありません。ID1 と ID2 の両方がターゲット (ドラッグされた要素がドロップされた場所) に関連していますが、質問ではドラッグされた要素とドロップされた要素の両方の ID が求められます。

の変更されたhtmlが与えられた（質問によるが、すべての要素にIDが追加されている）

<div class="draggable" id="item1">item 1</div>
<div class="draggable" id="item2">item 2</div>
...

<div class="droppable" id="drop1">drop location 1</div>
<div class="droppable" id="drop2">drop location 2</div>
...

この JavaScript は動作するはずです:

$(document).ready(function() {
  $(".draggable").draggable({cursor: 'move', helper: 'clone'});

  $(".droppable").droppable({
    drop: function(event, ui) {
      var dragID = ui.draggable.attr('id');
      var dropID = event.target.id;  // or $(this).attr("id"), or this.id
      $.ajax({
        type: "POST",
        url: 'www.mydomain.com/'+dragID+'/'+dropID,
        dataType: 'html',
        success: function(){}
      });
      return false;
    }
  });
});

ps - ajax POST も実行していますが、投稿されたデータはありません - 質問から削除されたと思います。URL にアクセスして 2 つの ID を渡すだけの場合は、そのまま GET で十分です。

$.get('www.mydomain.com/'+dragID+'/'+dropID, function(data) {
  ..
});
于 2014-07-31T15:53:33.270 に答える
-1

ID を取得しようとしている方法が無効です。.指定されたクラスのすべてのオブジェクトを返すクラスセレクターを使用しています。あなたの例では、各クラスが2つ以上あります（ドラッグ可能およびドロップ可能）。

次に、これらの要素には ID がないため、 .attr(id) は null を返します (私は思います)。

第三に、id設定されていない変数として解釈されることを意味する引用符がありません。

最後に、id を取得するevent.target.idには、drop 関数を使用して取得できます。

次のことを試してください。

<div class="draggable" id="item1">item 1</div>
<div class="draggable" id="item2">item 2</div>
...

<div class="droppable" id="drop1">drop location 1</div>
<div class="droppable" id="drop2">drop location 2</div>
...

それで：

$(document).ready(function() {
    $(".draggable").draggable({cursor: 'move', helper: 'clone'});

    $(".droppable").droppable({
        drop: function(event, ui) {
            var ID1 = event.target.id;
            var ID2 = $(this).attr("id");
            $.ajax({
                type: "POST",
                url: 'www.mydomain.com/'+ID1+'/'+ID2,
                dataType: 'html',
                success: function(){}
            });
            return false;
        }
     });
});
于 2013-09-19T15:15:15.977 に答える