Search code examples
jqueryuser-interfacedraggablejquery-ui-sortable

jQuery UI Draggable: clone item and disable a second drag of the same (original item)

I have the following situation:

The user can select columns from different tables that will be included into a view.

I would like to have a separate list for each table's columns and a list with the (user chosen) columns from the view.

I want the user to drag & drop columns from tables x, y, z into the view.

I have found an interesting 

 <a href="http://jsfiddle.net/B5PH4/253">JSfiddle</a>

This allows me to copy list items from the top div to the target div but it has some issues:

  1. The same list item can be copied for infinite times (it should only be included once and then deactivated somehow)

  2. There is no way of removing (sending back) the item once put in the target div. And I mention again that there will be 1 target (the view) and multiple sources (individual tables' columns). I would like the items removed to go back in the right tables.

I am well aware of the jQuery UI Sortable with Connect List. But it does not seem to give me the required level of control over the drag-drop sources/targets (issue 2 above),

Have you done something similar? Do you know at least a part of the solution? Or can you recommend me another jQuery plugin that does this?

Thanks!

Solution

  • Here I adapted the lists in the jquery example so it should be what you want.

    What happens is the sortable1 & 3 are the tables and sortable 2 is the view.

    I Only connected sortable 1 & 3 to 2 but not the other way round to stop dragging back to the table then had a remove button which detaches the item and uses the attribute to put it back in the right place. you could also keep track of position like this as well

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable1, #sortable2, #sortable3{
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li, #sortable3 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    	$( "#sortable1, #sortable3" ).sortable({
      		connectWith: "#sortable2"
    	});
	$( "#sortable2" ).sortable({});

	$("#sortable1 span, #sortable3 span").click(function(event){
		var item = $(event.target).closest('li');
		$('#'+$(event.target).attr('parent')).append(item.detach());
	});
  } );
  </script>
</head>
<body>
 
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1<span parent="sortable1" style="color: red">*</span></li>
  <li class="ui-state-default">Item 2<span parent="sortable1" style="color: red">*</span></li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
</ul>

<ul id="sortable3" class="connectedSortable">
  <li class="ui-state-highlight">Item 1<span parent="sortable3" style="color: red">*</span></li>
  <li class="ui-state-highlight">Item 2<span parent="sortable3" style="color: red">*</span></li>
</ul>
 
 
</body>
</html>