drag and drop button and create div or put into div

by Berat Emre Nebioğlu

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<div class="mainDiv">
  <div class="button">
    <ul class="buttondiv">
      <li>
        <button class="buttonClass">a</button>
      </li>
      <li>
        <button class="buttonClass">b</button>
      </li>
      <li>
        <button class="buttonClass">c</button>
      </li>
      <li>
        <button class="buttonClass">d</button>
      </li>
      <li>
        <button class="buttonClass">e</button>
      </li>
      <li>
        <button class="buttonClass">f</button>
      </li>
      <li>
        <button class="buttonClass">g</button>
      </li>
      <li>
        <button class="buttonClass">h</button>
      </li>
    </ul>
  </div>
</div>
<div class="boxclose">

<div>

CSS

li {
    list-style-type: none;
  }
  
  .mainDiv {
    position: relative;
    background-color: blue;
    width: 100vw;
    height: 100vh;
  }
  
  .mainDiv .button {
    position: absolute;
    background-color: yellow;
  }
  
  .mainDiv .button .buttondiv {
    display: inline;
  }
  
  .mainDiv .button .buttondiv .buttonClass {
    background-color: blue;
    width:20px;
    height:20px;
  }
  
  .mainDiv .button .droppablediv {
    display: block;
    background-color: pink;
    margin-top: 10px;
		width: 100px;
  }
  
  .mainDiv .button .droppablediv li {
    display: inline-block;
		margin-top:10px;
		
  }
	.mainDiv .button .droppablediv li .buttonClass
	{
		margin-left:15px;
	}
.boxclose{
  border:none;
  outline:none;
  background-color:transparent;
}
.boxclose:before {

    content: "×";
    background-color:red;
}
  /* .buttondiv .buttonClass {

  display: block;
   margin-top:5px;
}
.mainDiv .buttondiv {
  position:absolute;
  margin-left: 20px;
  margin-top: 10px;
  width:300px;
  height:200px;

  background-color:black;

}

.mainDiv .buttondiv .droppablediv{
   margin-top:10px;
   background-color:pink;

  

 }


  


}
.droppablediv .divClass
{
  position:absolute;
  background-color:pink;
  min-height:70px;
   
 
 }
.droppablediv .divClass .buttonClass
{
    display:block;
}
/*
.droppablediv .divClass .buttonClass /*.ui-draggable-handle*/
  
  {
    /*margin-top:5px;
  background-color:blue;
  
 }
/*.divClass .buttonClass{
 position:absolute;
  display:block;
  margin-left:0;
  margin-top:20px;
  }*/
    /*.divClass .ui-droppable{

  background-color:red;
  position:absolute;
  float:left;
 top:0;
  left:0;
}*/

JavaScript

/*$(".buttonClass").draggable({
 // $('button').removeClass('buttonClass'),
  cancel: '',
  axis: "y",
});*/
$(function() {

  $(".droppablediv").sortable({
    revert: true,
    handle: 'button',
    cancel: ''
  });
  $(".buttonClass").closest('li').draggable({
    connectToSortable: ".droppablediv",
    // helper: "clone",
    // revert: "invalid",
    cancel: ''
    //axis: "y"
  });
  // $( "ul, li" ).disableSelection();
});
/*$(function () {
    $('.droppablediv').sortable({
        handle: 'button',
        cancel: ''
    });
});
$(".buttonClass").draggable({
  cancel: '',
  axis: "y",
});*/
var $boxclose = $('.boxclose');
$(".buttonClass").closest('li').droppable({
  //addClasses: false,
  //tolerance: "touch",
  over: function(event, ui) {

  },
  drop: function(e, a) {
	
   
    if ($(this).closest('.droppablediv').length) {
 		
     $(this).closest('.droppablediv').append(a.draggable);
    a.draggable.css('top', "0");
	
    }  
		else
    {
		var div2 = $('<div>');
	  div2.attr('class', 'droppablediv');
    $boxclose.clone().appendTo($(div2));
			div2.append($(this));
      div2.append(a.draggable);
    $('.buttondiv').append(div2);
		a.draggable.css('top', "0");
    }
  },

  activeClass: "ui-state-highlight",

});