Клонировать значки вместе с перетаскиванием - PullRequest
Новая
       66

Клонировать значки вместе с перетаскиванием

0 голосов
/ 05 августа 2020

У меня есть 2 граничных места для инструментов и свободное пространство (dropable-area). И это пространство для инструментов включает в себя некоторые формы, которые можно перетаскивать, а также отбрасывать в свободное пространство.

То, что я хочу исправить, похоже на клонирование, оно может решить мою проблему. Как я могу добавить клон иконок на их место после удаления?

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

$(function() {
  $(".doitcenter").draggable({
    revert: "invalid",
    handle: ".shapes"
  });
  $(".droppable-area").droppable({
    drop: function(event, ui) {
      ui.draggable.appendTo(this).position({
        my: "center center-5",
        at: "center",
        of: event
      });
    }
  });
  $(".free-space").on("click", ".close-button", function(e) {
    $(this).closest(".doitcenter").remove();
  });
});
.tool-space {
  border: 10px double #005580;
  min-height: 608px;
}

.free-space {
  border: 10px solid #005580;
  min-height: 608px;
}

.free-space .doitcenter {
  width: 40px;
}

.doitcenter {
  text-align: center;
}

.close-button {
  font-size: 24px;
  cursor: pointer;
}

.shapes {
  opacity: 0.8;
  margin-bottom: 10px;
}

.shapes:hover {
  cursor: move;
  opacity: 1;
}
<script src="https://kit.fontawesome.com/6e2154b1f7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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="container">
  <div class="row">
    <div class="col-2">
      <div class="tool-space">
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-square fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-circle fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-square fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-circle fa-2x shapes"></i></span>
        </div>
      </div>
    </div>
    <div class="col-10">
      <div class="free-space droppable-area">
      </div>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 05 августа 2020

Почти готово, вы пропустили helper: 'clone' config для draggable и .clone() при применении функции drop к элементу 

$(function() {
  $(".doitcenter").draggable({
    revert: "invalid",
    handle: ".shapes",
    helper: 'clone'
  });
  $(".droppable-area").droppable({
    drop: function(event, ui) {
      if (!$(ui.draggable).hasClass('cloned')) {
        ui.draggable
          .clone()
          .addClass('cloned')
          .appendTo(this)
          .position({
            my: "center center-5",
            at: "center",
            of: event
          })
          .draggable();
       }
    }
  });
  $(".free-space").on("click", ".close-button", function(e) {
    $(this).closest(".doitcenter").remove();
  });
});
.tool-space {
  border: 10px double #005580;
  min-height: 608px;
}

.free-space {
  border: 10px solid #005580;
  min-height: 608px;
}

.free-space .doitcenter {
  width: 40px;
}

.doitcenter {
  text-align: center;
}

.close-button {
  font-size: 24px;
  cursor: pointer;
}

.shapes {
  opacity: 0.8;
  margin-bottom: 10px;
}

.shapes:hover {
  cursor: move;
  opacity: 1;
}
<script src="https://kit.fontawesome.com/6e2154b1f7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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="container">
  <div class="row">
    <div class="col-2">
      <div class="tool-space">
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-square fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-circle fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-square fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-circle fa-2x shapes"></i></span>
        </div>
      </div>
    </div>
    <div class="col-10">
      <div class="free-space droppable-area">
      </div>
    </div>
  </div>
</div>
...