jQuery 2D элемент перетаскивания (не абсолютная позиция) - PullRequest
Новая
       24

jQuery 2D элемент перетаскивания (не абсолютная позиция)

0 голосов
/ 06 апреля 2020

Я собираюсь поместить внешний элемент во внутренний html, используя перетаскивание. Поэтому я предполагаю, что так. Это внутреннее html. 

<div class="inner_html">
   <div class="title">
     <h1>This is title</h1>
   </div>
   <div class="body">
     <li>this is element</li>
     <a>element</a>
   </div>
</div>

Вот внешнее html. <div>This is external element</div>

Я собираюсь перетащить внешний элемент и перейти во внутренний html. Таким образом, последний элемент может получить много результатов. Я думаю, что если бы позиция была абсолютной, то это легко сделать с помощью jquery перетаскиваемого плагина. Но я не хочу абсолютной позиции. просто хочу положить во внутреннее html.

Может кто-нибудь мне помочь?

1 Ответ

1 голос
/ 06 апреля 2020

Рассмотрим следующий код. 

$(function() {
  $(".drag > div").draggable();
  $(".inner_html").droppable({
    drop: function(e, ui) {
      ui.draggable.css({
        top: "",
        left: "",
        position: "inherit"
      }).appendTo($(".inner_html"));
    }
  });
});
.inner_html {
  width: 340px;
  background: #ccc;
  padding: 1em;
  margin-bottom: 20px;
}

.inner_html>div {
  background: white;
  border: 1px solid #222;
  border-radius: 3px;
}

.drag {
  border: 1px solid #ccc;
  width: 340px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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="inner_html">
  <div class="title">
    <h1>This is title</h1>
  </div>
  <div class="body">
    <a>Link</a>
  </div>
</div>
<div class="drag items">
  <h3>Items</h3>
  <div>This is external element</div>
</div>

Это очень простой пример. Исходя из вашего комментария, вы, похоже, имеете более сложный сценарий. Вы должны предоставить Минимальный воспроизводимый пример .

...