Заставляет перетаскиваемый предмет исчезать при падении на сбрасываемый контейнер

У меня есть четыре перетаскиваемых элемента и перетаскиваемая область, которая в настоящее время выглядит как this (Fiddle), и я хотел бы улучшить опыт, добавив следующие функции:

1) при запуске: отображать альтернативный элемент, как только он выходит из своего исходного положения.

2) при падении: перетаскиваемый элемент исчезает, когда его бросают в контейнер для удаления (например, ".frame").

Как лучше всего это сделать?

Спасибо, любая помощь будет принята с благодарностью!

$(document).ready(function() {
  $("[id*=draggable]").draggable({
    containment: "#area51",
    revert: true,
    stack: ".frame_type"
  });
  $(".frame").droppable({
    hoverClass: "ui-state-active",

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

      if (currentId == "draggable-1") {
        $(this).css('background-color', '#f1c40f');
      } else if (currentId == "draggable-2") {
        $(this).css('background-color', '#e74c3c');
      } else if (currentId == "draggable-3") {
        $(this).css('background-color', '#3498db');
      } else if (currentId == "draggable-4") {
        $(this).css('background-color', '#9b59b6');
      }
    }

  });
});
<div class="container-fluid text-center">
  <div class="row" id="area51">
    <div class="col-xs-8">
      <div class="showroom">
        <div class="frame">
          <img class="display" src="http://placehold.it/200" />
        </div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="selection text-center">
        <ul class="list-unstyled">
          <li id="draggable-1" class="frame_type color-1"></li>
          <li id="draggable-2" class="frame_type color-2"></li>
          <li id="draggable-3" class="frame_type color-3"></li>
          <li id="draggable-4" class="frame_type color-4"></li>
        </ul>
      </div>
    </div>
  </div>
</div>


javascript jquery draggable jquery-ui jquery-ui-droppable
person Saeed Abbaspour    schedule 18.03.2015    source источник
comment
в №1: что вы подразумеваете под альтернативным элементом? вы имеете в виду клон перетаскиваемого элемента?   -  person Dhiraj    schedule 19.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

  1. <li/> элементы теперь являются тенями содержащих перетаскиваемых div элементов и измененных стилей, которые перекрывают их.
  2. jQuery .hide() используется для их удаления при завершении перетаскивания

Я также сильно упростил JS. По сути, у вас есть ссылка на элемент все время, поэтому вам не нужно сопоставлять его по идентификатору или искать его.

CSS можно было бы полюбить, потому что я не тратил на это слишком много времени. Ширина меньше, чем в вашем образце.

http://jsfiddle.net/pratik136/L3abroyy/10/

$(document).ready(function() {
  $("[id*=draggable]").draggable({
    containment: "#area51",
    revert: true,
    stack: ".frame_type"
  });
  $(".frame").droppable({
    hoverClass: "ui-state-active",

    drop: function(event, ui) {
      var elem = ui.draggable;
      $(this).css('background-color', elem.css('background-color'));
      $(elem.parent()).hide('slow');
    }

  });
});
/* General Styles */

* {
  box-sizing: border-box;
}
html,
body {
  background-color: #eee;
  color: #666;
}
.showroom {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  height: 500px;
  padding: 100px;
}
.frame {
  background-color: #fff;
  height: 300px;
  width: 300px;
  padding: 50px;
  border-radius: 5px;
}
.display {
  border-radius: 5px;
  height: 200px;
  width: 200px;
  background-color: #fff;
}
.selection {
  border-radius: 5px;
  height: 500px;
}
.frame_type {
  height: 50px;
  width: 100%;
  border-radius: 5px;
}
li {
  height: 50px;
  width: 30%;
  border-radius: 5px;
}
.color-1,
.color-1 div {
  background-color: #f1c40f;
}
.color-2,
.color-2 div {
  background-color: #e74c3c;
}
.color-3,
.color-3 div {
  background-color: #3498db;
}
.color-4,
.color-4 div {
  background-color: #9b59b6;
}
.ui-state-active {
  background-color: #e1e1e1 !important;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container-fluid text-center">
  <h1>Paintings & Frames: Interactive App</h1>

  <div class="row" id="area51">
    <div class="col-xs-8">
      <div class="showroom">
        <div class="frame">
          <img class="display" src="http://placehold.it/200" />
        </div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="selection text-center">
        <h3>Draggable Frames</h3>

        <ul class="list-unstyled">
          <li class="color-1">
            <div id="draggable-1" class="frame_type"></div>
          </li>
          <li class="color-2">
            <div id="draggable-2" class="frame_type"></div>
          </li>
          <li class="color-3">
            <div id="draggable-3" class="frame_type"></div>
          </li>
          <li class="color-4">
            <div id="draggable-4" class="frame_type"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

person bPratik    schedule 19.03.2015
comment
Я ценю ваше время и помощь, но я ищу лучший / масштабируемый подход. В их API есть пример, показывающий, как наложить функциональность на перетаскиваемый объект с помощью start, drag и stop, но я не могу понять, как их использовать. Например: stop: function() { $('#draggable').hide(); }; - person Saeed Abbaspour; 19.03.2015
comment
Ничего страшного, мы можем это посмотреть. Во-первых, ожидаете ли вы конечного результата? - person bPratik; 19.03.2015
comment
Я думаю, что это трехэтапный процесс: 1- При запуске: перетаскиваемая начальная позиция заменяется пассивным состоянием (например, div серого цвета). 2- При падении: перетаскиваемое исчезновение 3- При остановке: перетаскиваемое начальное положение заменяется начальным состоянием. Есть ли в этом смысл? - person Saeed Abbaspour; 19.03.2015