Drag and drop elements from list into separate blocks

Question

I m trying to get a jQuery component similar to the one on this site   Basically  there is a list with available elements that you can drag and drop into several blocks   I have quite a bit of JavaScript development experience  but I m quite new to jQuery  the language I want this to be scripted in   Can you please lead me to some example similar to the one showed above  or give me some hints on what would be a good place to start looking for something like this

User · Answer

Also check it   jQuery  Customizable layout using drag and drop  examples   http   devheart org examples jquery-customizable-layout-using-drag-and-drop 1-getting-started-with-sortable-lists

User · Answer

x000D   x000D   function dragStart event    x000D              event dataTransfer setData  Text   event target id   x000D            x000D   x000D          function allowDrop event    x000D              event preventDefault    x000D            x000D   x000D          function drop event    x000D                  maincontainer   append   lt br  gt  lt table style  border 1px solid black  font-size 20px   gt  lt tr gt  lt th gt Name lt  th gt  lt th gt Country lt  th gt  lt th gt Experience lt  th gt  lt th gt Technologies lt  th gt  lt  tr gt  lt tr gt  lt td gt   Bhanu Pratap    lt  td gt  lt td gt  India  lt  td gt  lt td gt   3 years    lt  td gt  lt td gt   Javascript Jquery AngularJS ASP NET C   XML HTML CSS Telerik XSLT AJAX etc    lt  td gt  lt  tr gt  lt  table gt     x000D            x000D    droptarget   x000D              float  left  x000D              min-height  100px  x000D              min-width  200px  x000D              border  1px solid black  x000D              margin  15px  x000D              padding  10px  x000D              border  1px solid  aaaaaa  x000D            x000D   x000D           contentEditable true  empty not  focus  before   x000D              content  attr data-text   x000D            x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt  x000D   lt div class  droptarget  ondrop  drop event   ondragover  allowDrop event   gt  x000D           lt p ondragstart  dragStart event   draggable  true  id  dragtarget  gt Drag Table lt  p gt  x000D       lt  div gt  x000D   x000D       lt div id  maincontainer  contenteditable true data-text  Drop here     class  droptarget  ondrop  drop event   ondragover  allowDrop event   gt  lt  div gt  x000D   x000D   x000D     this is just simple here i m appending html table into a div at the end we can achieve this or any thing with a simple concept of calling a JavaScript function when we want  here on drop    In this example you can drag  amp  drop any number of tables  new table will be added below the last table exists in the div other wise it will be the first table in the div  here we can add text between tables or we can say the section where we drop tables is editable we can type text between tables     Thanks

User · Answer

Dragging an object and placing in a different location is part of the standard of HTML5  All the objects can be draggable   But the Specifications of below web browser should be followed   API       Chrome    Internet Explorer   Firefox   Safari    Opera Version    4 0            9 0             3 5       6 0      12 0  You can find example from below  https   www w3schools com html tryit asp filename tryhtml5 draganddrop2

User · Answer

I wrote some test code to check JQueryUI drag drop  The example shows how to drag an element from a container and drop it to another container   Markup-   lt div class  row  gt       lt div class  col-xs-3  gt         lt div class  panel panel-default  gt           lt div class  panel-heading  gt             lt h1 class  panel-title  gt Panel 1 lt  h1 gt           lt  div gt           lt div id  container1  class  panel-body box-container  gt             lt div itemid  itm-1  class  btn btn-default box-item  gt Item 1 lt  div gt             lt div itemid  itm-2  class  btn btn-default box-item  gt Item 2 lt  div gt             lt div itemid  itm-3  class  btn btn-default box-item  gt Item 3 lt  div gt             lt div itemid  itm-4  class  btn btn-default box-item  gt Item 4 lt  div gt             lt div itemid  itm-5  class  btn btn-default box-item  gt Item 5 lt  div gt           lt  div gt         lt  div gt       lt  div gt       lt div class  col-xs-3  gt         lt div class  panel panel-default  gt           lt div class  panel-heading  gt             lt h1 class  panel-title  gt Panel 2 lt  h1 gt           lt  div gt           lt div id  container2  class  panel-body box-container  gt  lt  div gt         lt  div gt       lt  div gt     lt  div gt    JQuery codes-    document  ready function          box-item   draggable       cursor   move       helper   clone           container1   droppable     drop  function event  ui        var itemid     event originalEvent toElement  attr  itemid            box-item   each function           if    this  attr  itemid       itemid              this  appendTo   container1                                 container2   droppable     drop  function event  ui        var itemid     event originalEvent toElement  attr  itemid            box-item   each function           if    this  attr  itemid       itemid              this  appendTo   container2                                   CSS-   box-container       height  200px      box-item       width  100       z-index  1000     Check the plunker JQuery Drag Drop

User · Answer

Check this out  http   wil-linssen com entry extending-the-jquery-sortable-with-ajax-mysql  I m using this and I m happy with the solution   Right here you can find a demo  http   demo wil-linssen com jquery-sortable-ajax   Enjoy

User · Answer

Maybe jQuery UI does what you are looking for  Its composed out of many handy helper functions like making objects draggable  droppable  resizable  sortable etc   Take a look at sortable with connected lists

[jquery] Drag and drop elements from list into separate blocks

Examples related to jquery

Examples related to drag-and-drop