Перетаскиваемый и сортируемый снаружи div - PullRequest
Новая
       42

Перетаскиваемый и сортируемый снаружи div

0 голосов
/ 24 сентября 2019

думаю, у нас есть сетка для инвентаря 128x512px.Я хочу, чтобы все деления (элемент 64x64px) извлекались из сетки, перетаскивая их.внутри инвентаря дивы должны быть сортируемыми.Я не хочу никаких списков.любые предложения, делая это самым простым способом с jquery или js. 

combine ui dragable and sortable 

<style>  #snaptarget { 
  height: 128px; width:512; 
   display: grid;
  grid-gap: 64px 64px;  background:green;
     }
 .item { border:thin solid black; display: inline-block;width: 64px;height:64px; background:yellow; display:inline-block;float:right; }</style>

<div id=snaptarget></div>

<div class="item sortable"><img></div>

1 Ответ

0 голосов
/ 24 сентября 2019

Я сделал множество догадок, потому что не было никакого примера.Я использовал flex и row в качестве дисплея, измените на столбец, если хотите. 

$(function() {
  $("#sortable").sortable({
    revert: true
  });
  $("#holder .item").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  });
  $("#sortable,#sortable .item,#draggable,#draggable .item").disableSelection();
});
.container {
  display: flex;
  height: 128px;
  width: 512;
  padding: 1em;
  flex-direction: row;
  font-color: white;
}

#sortable {
  background-color: green;
}

#holder {
  background-color: lime;
}

.item {
  border: thin solid black;
  min-width: 64px;
  min-height: 64px;
  background-color: pink;
  flex: auto;
  width: 64px;
  height: 64px;
}

div.item {
  display: inline-block;
}

.ui-widget-header p,
.ui-widget-content p {
  margin: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" integrity="sha256-AjyoyaRtnGVTywKH/Isxxu5PXI0s4CcE0BzPAX83Ppc=" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<div id="holder" class="container">
  <div class="item ui-state-highlight">Drag me down</div>
</div>

<div id="sortable" class="container ui-widget-header">Put stuff in here
  <div class="item ui-state-highlight">Item 1</div>
  <div class="item ui-state-highlight">Item 2</div>
  <div class="item ui-state-highlight">Item 3</div>
  <div class="item ui-state-highlight">Item 4</div>
  <div class="item ui-state-highlight">Item 5</div>
</div>
...