перетащите изображение на несколько бросаемых div с тем же классом - PullRequest
Новая
       42

перетащите изображение на несколько бросаемых div с тем же классом

0 голосов
/ 30 мая 2018

Я пытаюсь сделать изображения доступными для нескольких делений, я хотел бы иметь только 1 класс для «зон перетаскивания» и только 1 для перетаскиваемых элементов.

Мне удалось это сделать, но я недоволен, поскольку мне нужно поместить id в «зоны сброса»: 

<div class="drop" id="id1"</div>

Я бы хотел сделать это без идентификаторов: 

<div class="drop"</div>

Поскольку ящики генерируются динамически (php), хотя я мог генерировать случайные идентификаторы, я бы хотел этого избежать.

$(function() {
  var $dragElem = $(".drag"),
    $dropId1 = $("#id1")
  $dropId2 = $("#id2"),
    $dropZone = $(".drop");

  $($dragElem).draggable({
    revert: "invalid",
    helper: "clone",
    cursor: "move"
  });

  $dropId1.droppable({
    accept: $dragElem,
    drop: function(event, ui) {
      console.log(ui.draggable);
      deleteImage(ui.draggable, $(this));
      $(this).droppable("disable");
    }
  });

  $dropId2.droppable({ //same function but with different id
    accept: $dragElem,
    drop: function(event, ui) {
      console.log($(this).attr("id"));
      deleteImage(ui.draggable, $(this));
      $(this).droppable("disable");
    }
  });

  function deleteImage($item, $id) {
    $item.fadeOut(function() {
      $item.appendTo($id).fadeIn();
    });
  }
});
.drop {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<div class="drop" id="id1"></div>
<div class="drop" id="id2"></div>

<div>
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
</div>

Вот рабочий JSFiddle с идентификатором .

Я слышал об уникальных элементных узлах, но не смог их использовать.

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 30 мая 2018

Вам вообще не нужно использовать атрибуты id.Пропускаемые элементы имеют класс .drop, поэтому вы можете использовать его непосредственно для всех случаев: 

$(function() {
  var $dragElem = $(".drag"),
    $dropZone = $(".drop");

  $dragElem.draggable({
    revert: "invalid",
    helper: "clone",
    cursor: "move"
  });

  $dropZone.droppable({
    accept: $dragElem,
    drop: function(event, ui) {
      deleteImage(ui.draggable, this);
      $(this).droppable("disable");
    }
  });

  function deleteImage($item, $id) {
    $item.fadeOut(function() {
      $item.appendTo($id).fadeIn();
    });
  }
});
.drop {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="drop"></div>
<div class="drop"></div>

<div>
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
</div>
...