2

ドラッグ アンド ドロップ コントロールを使用するのはこれが初めてですが、それがどのように機能するかを理解するのに問題があります。現在、2 つの DIV があり、ある div から別の div に要素を移動したいと考えています。ドラッグ可能を使用すると、DIVS を必要のない場所に配置できます。要素をドラッグできる領域を制限したいのです。

一方、jquery UI の例を見てきましたが、それらはすべてドロップ可能な要素とやり取りしますが、ドラッグ可能な要素から id 属性を取得する必要があります。これは私がこれまで行ってきたことであり、現在、div を制限されたゾーン内に留めることができないだけでなく、ドラッグ可能な要素 Id 属性を取得することもできません。

どんな助けでも大歓迎です。ありがとう。

http://jsfiddle.net/LPWhc/1/

$(function() {
  $(".draggable").draggable();
  $(".droppable").droppable({
    drop: function(event, ui) {
      var id, state;
      state = $(this).attr("name");
      id = $(this).closest(".droppable").attr("id");
      alert("Element Id: " + id);
      alert("Element New State: " + state);
    }
  });
});

これは、ドラッグ可能な効果で現在発生しているバグを示す更新されたフィドルです。 http://jsfiddle.net/LPWhc/3/

$(function() {
    $(".draggable").draggable({ revert: 'invalid'});

    $(".droppable").droppable({
        accept: '.draggable',
        drop: function(event, ui) {
            $(this).append($(ui.helper));
            $(".draggable").addClass("item"); 
            $(".item").removeAttr("style");
            $(".item").draggable({
                revert: 'invalid'
            });
        }
    });
});
4

1 に答える 1

4

HTML:

   <div name="list-a" class="droppable">
  <h3>List A</h3>
  <div class="task-wrapper">
      <div class="draggable" id="1" name="1">
          <a href="#">Element 1</a>
      </div>
      <div class="draggable" id="2" name="3">
          <a href="#">Element 2</a>
      </div>
      <div class="draggable" id="3" name="3">
          <a href="#">Element 3</a>
      </div>
  </div>
</div>
<div name="list-b" class="droppable">
  <h3>List B</h3>
  <div class="task-wrapper">
      <div class="draggable" id="5" name="5">
          <a href="#">Element 5</a>
      </div>
      <div class="draggable" id="6" name="6">
          <a href="#">Element 6</a>
      </div>
  </div>
</div>

jQuery:

$(document).ready(function(){
    $( ".draggable" ).draggable({
    start: function( event, ui ) {
        var id = $(this).closest(".draggable").attr('id');
    }
});

$( ".droppable" ).droppable({
    accept: '.draggable',
    drop: function(event, ui){
        var id = ui.draggable.attr("id");
        alert(id);  
    }
    });
});
于 2013-03-28T22:14:41.507 に答える