JSFiddle - React, Tailwind, and code Playground

jQuery - Draggable - drag drop block in block rel and absolute

by Ben Clayton

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="draggable" class="ui-state-highlight">Drag me down</div>
 
<div class="block sortable large">
    
  <div class="block sortable">
    <div class="block small">rel 1</div>
    <div class="block small">rel 2</div>
  </div>
 
  <div class="block sortable absframe">
    <div class="block small abs">Abs 1</div>
    <div class="block small abs">Abs 2</div>
  </div>
   
  <div class="block">TEST 2</div>
  <div class="block">TEST 3</div>
 
</div>

CSS

.block {width:400px;height:100px;border:1px solid red;margin-bottom:4px;}

.small {width:180px;height:40px;}
.abs   {border:1px solid green;}
.large {height:450px;width:420px;padding:2px;}

JavaScript

$(function(){
    var arr=[
                {type:1},
                {type:2,prop:{width:33,height:44,align:'left'}},
                {type:3},
                {type:4},
                {type:5}
            ];
      
    $( ".sortable" ).sortable({
        revert: true,
        stop:function(event,ui){
            debugger;
            console.log(ui.item.data('node'))
        }
    });
    
    $( ".abs" ).draggable({containment: ".absframe"});
    
    $( "#draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
        //stop:function(event,ui){console.log($(this).data('node'))}
    });
    
    $( "#sortable" ).on( "dragstop", function( event, ui ) {} );
    
    $( "ul, li" ).disableSelection();
    
    $("li.ui-state-default").each(function(idx){
       $(this).data('node',arr[idx]);
    });  
      
  });