Dragable and sortable outside div

Question

guess we have a div grid for inventory 128x512px. i want all (item 64x64px) divs outside snapable to the grid by dragging tehm. inside the inventory the divs must be sortable. i want no lists. any suggestions by doing it the easiest way with jquery or 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>

Please clarify what you mean by "i want no lists". What have you tried here and where are your questions with regard to that? — Mark Schultheiss, Sep 24 '19 at 12:20

score 0 · Answer 1 · answered Sep 24 '19 at 20:45

I made a good number of guesses since there was no example to go by. I used flex and row as the display, change to column if you desire that.

$(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>

thank you very much, this helps me a lot! it's close to my imagination — Shorty, Sep 25 '19 at 07:56
just another clue, is it possible to stash items with the same property? — Shorty, Sep 25 '19 at 12:49
i mean if you add a class to item elements that they are stashed on the same field when the have the same properties. guess they should count on the field. by the way if you add divs to holder afterwards like this: — Shorty, Sep 26 '19 at 09:35
var $jqnewdiv1 = $jq( "
" ), existingdiv1 = document.getElementById( "holder" ); $jq( "#holder" ).append( $jqnewdiv1,existingdiv1 ); — Shorty, Sep 26 '19 at 09:36
When I run, I can drag/order those in the sort/lower element and drag from those in the first/top element, so I do not see anything to solve here. To get more options you can read the documentation on the configuration https://jqueryui.com/draggable/ and https://jqueryui.com/sortable/ — Mark Schultheiss, Sep 26 '19 at 10:50

Dragable and sortable outside div

1 Answers1