CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropdraggabledroppable
prusama
prusama

Reputation: 99

Drag and drop: Draggable append to droppable

I have a project http://jsfiddle.net/x5T4h/566/ .

html:

<div class="dropable base">
  <div class="draggable">Div1</div>
  <div class="draggable">Div2</div>
  <div class="draggable">Div3</div>
  <div class="draggable">Div4</div>
</div>

<div class="places">
    <div class="droppable">Move here div</div>
  <div class="droppable">Move here div</div>
  <div class="droppable">Move here div</div>
  <div class="droppable">Move here div</div>
</div>

jQuery UI:

$('.droppable').droppable({ tolerance: "touch" });
$('.draggable').draggable({ revert: "invalid" });
$('.base').droppable();

I want to:

  1. Make draggable appended to droppable when it is dropped. I tried to use helper and appendTo function, but it does not work that way I was looking for. I want make dropped draggable the same position and same size as that droppable (excepted class .base). It should look like the draggable lays on the droppable at same possition. I tried everything.

  2. Only one draggable can be dropped to one droppable.

I tried everything, but it still did not work like I expected.

Upvotes: 2

Views: 3084

Answers (1)

Twisty
Twisty

Reputation: 30903

There are lots of ways to do this and it's not entirely clear what you're looking for in your question. Here my suggestion.

Working Example: http://jsfiddle.net/Twisty/x5T4h/568/

JavaScript

$(function() {
  $('.droppable').droppable({
    tolerance: "touch",
    drop: function(e, ui) {
      $(this).append(ui.draggable);
      $(this).find(".draggable").css({
        position: "absolute",
        top: 0,
        left: 0,
        margin: "-1px",
        width: $(this).width() + "px"
      });
      $(e.target).droppable("disable");
    }
  });
  $('.draggable').draggable({
    revert: "invalid",
    zIndex: 1000
  });
  $('.base').droppable();
});

Hope that helps.

Upvotes: 0

Related Questions