I have a nested list items and would like to achieve drag and drop functionality.
Scenario:
one level tree structure
child items directly on root node and in first level tree node
move child items out of tree node or in to tree node
restrict tree nodes to drag
HTML
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="folder"> Empty Folder
<ul id="sortable1" class="connectedSortable">
</ul>
</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="folder"> Folder 1
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</li>
<li class="ui-state-default">Item 7</li>
<li class="ui-state-default">Item 8</li>
<li class="folder"> Folder 2
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</li>
</ul>
JS/jQuery
$(function() {
$( ".connectedSortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
Example at JS Fiddle
I would like to be able to move a item in to Empty folder as well, restrict folders to move, restrict sorting items, move only if item is moved out of the folder or in to a folder. And on successful move call a function, where I can read the item Id and folder Id and do some logic.
for having drag-drop treeview , you better use nestedSortable, it's very easy. here is a sample of how you can use it
<ol class="sortable">
<li id="list_1"><div><span class="disclose"><span></span></span>Item 1</div>
<ol>
<li id="list_2"><div><span class="disclose"><span></span></span>Sub Item 1.1</div>
<ol>
<li id="list_3"><div><span class="disclose"><span></span></span>Sub Item 1.2</div>
</ol>
</ol>
<li id="list_4"><div><span class="disclose"><span></span></span>Item 2</div>
<li id="list_5"><div><span class="disclose"><span></span></span>Item 3</div>
<ol>
<li id="list_6" class="mjs-nestedSortable-no-nesting"><div><span class="disclose"><span></span></span>Sub Item 3.1 (no nesting)</div>
<li id="list_7"><div><span class="disclose"><span></span></span>Sub Item 3.2</div>
<ol>
<li id="list_8"><div><span class="disclose"><span></span></span>Sub Item 3.2.1</div>
</ol>
</ol>
<li id="list_9"><div><span class="disclose"><span></span></span>Item 4</div>
<li id="list_10"><div><span class="disclose"><span></span></span>Item 5</div>
</ol>
and the javascripts
$(document).ready(function(){
$('ol.sortable').nestedSortable({
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div',
maxLevels: 3,
isTree: true,
expandOnHover: 700,
startCollapsed: true,
start: function(e, ui) {
//some code
},
receive: function(e, ui) {
//some code
},
stop: function(e, ui) {
//code of Serialize
//this happend when the move complete
var treeSerialize = jQuery('ol.sortable').nestedSortable('updatecategories', {startDepthCount: 0});
console.log(treeSerialize);
}
});
});
demo, it's very nice and good, it use it on several app, for menu, categories, and other nested things
This is how I ended up to complete it. Fiddle Demo
Javascript
$(function() {
// $( "ul[id^='sortable']" ).sortable({
// connectWith: ".connectedSortable"
// }).disableSelection();
$( "li.product" ).draggable({
appendTo: "body",
helper: "clone"
});
$( ".folder" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
//$( this ).find( ".placeholder" ).remove();
//$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
alert("Dragging Product Id is "+$(ui.draggable).attr("id") + "Dropping Folder Id is "+ $(event.target).attr("id"));
}
})
});
Mark up
<ul id="sortablex"><li class="folder">
<ul>
<li id="1" class="ui-state-default product">Product 1</li>
</ul>
</li>
<li id="1" class="folder"> Empty category
<ul id="sortable1" class="connectedSortable">
</ul>
</li>
<li id="1" class="ui-state-default product">Product 2</li>
<li id="1" class="ui-state-default product">Product 3</li>
<li id="f1" class="folder"> Category 1
<ul id="sortable2" class="connectedSortable">
<li id="1" class="ui-state-default product">Product 4</li>
<li id="1" class="ui-state-default product">Product 5</li>
</ul>
</li>
<li id="1" class="ui-state-default product">Product 7</li>
<li id="1" class="ui-state-default product">Product 8</li>
<li id="1" class="folder"> Category 2
<ul id="sortable2" class="connectedSortable">
<li id="1" class="ui-state-highlight product">Product 1</li>
<li id="1" class="ui-state-highlight product">Product 2</li>
<li id="1" class="ui-state-highlight product">Product 3</li>
<li id="1" class="ui-state-highlight product">Product 4</li>
<li id="1" class="ui-state-highlight product">Product 5</li>
</ul>
</li>
</ul>
CSS
folder{
color:#c30;
font-weight:bold;
}
.folder ul{
color:#000;
font-weight:normal;
}
Related
I have below markup which displays submenus
<ul class="list-unstyled collapse show" id="pageSubmenu" style="">
<li>Report 1</li>
<li>Report 2</li>
<li> Report 3</li>
</ul>
Jquery to handle click event is as below
$("#pageSubmenu li a").click(function () {
$(this).children('a').trigger('click');
alert('clicked');
});
What's wrong in my code?
$("#pageSubmenu li a").click(function () {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled collapse show" id="pageSubmenu" style="">
<li>Report 1</li>
<li>Report 2</li>
<li>Report 3</li>
</ul>
I have 2 list element
<div id="list-one">
<ul class="ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
Can ul-two list element order follow ul-one order when I sort ul-one using jQuery Sortable ?
I want get the result like
<div id="list-one">
<ul class="ul-one">
<li data-order="2">item 2</li>
<li data-order="1">item 1</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="2">item 5</li>
<li data-order="1">item 4</li>
<li data-order="3">item 6</li>
</ul>
</div>
just drag ul-one element
Thanks for the answer
Sorry for misunderstand the question.
This is a working solution. I added id tag to easy call
http://jsfiddle.net/39ZvN/1141/
Try this
<div id="list-one">
<ul class="sort ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="sort ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
$( '.sort li' ).each(function() {
var position = $(this).data('order');
$(this).siblings().eq(position+1).after(this);
});
I have a draggable pair of lists. The design: 2 ul list, interchangable items, with drag and drop.
I am using jquery sortable widget.
The question is that i want to fire an event when an li item drops in the or fire some event when ul list change.
How can i do that??
HTML:
div class="col-lg-4">
<div class="form-group">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
JavaScript:
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
})
Please check below snippet. Used stop and receive two events. Stop event will trigger every time element dragged and dropped. And receive event will trigger only when element is moved from one list to another.
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) {
var dropElemTxt = $(ui.item).text();
alert(dropElemTxt+" moved");
},
receive: function(event, ui) {
var dropElemTxt = $(ui.item).text();
alert(dropElemTxt+" Moved from another list");
},
}).disableSelection();
})
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
Contrary to my comment above, use 'stop' instead of 'drop':
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function(){
alert("yeah buddy");
}
}).disableSelection();
})
https://jsfiddle.net/0yw43n6w/
I have requirement of creating two list boxes with drag and drop from one to another. I have a button to add and remove for selecting and paste from one to another. I should also have the same funtionality even on a doubleclick of the item in listbox . I tried with select tag HTML ...I am able to get double click and add/remove btn click. I tried with unorderd lists ul tag HTML ...... I am able to drag and drop and event get the double click. Now I need the solution with doubleclick, button click and drag and drop in one thing. Either select or ul anything is fine, but 3 functionalities should be achieved ..Thanks in advance
$(function() {
$( "#sortable" ).sortable({
connectWith:".conn"
});
$( "#sortable" ).disableSelection();
$( "#sortable1" ).sortable({
connectWith:".conn"
});
$( "#sortable1" ).disableSelection();
});
$('#add').click(function() {
//return !$('#sortable li:selected').remove().appendTo('#sortable1');
// $("#sortable1").trigger("dblclick");
});
$('#remove').click(function() {
return !$('#sortable1 li:selected').remove().appendTo('#sortable');
});
$("#sortable1").on("dblclick", "li", function () {
$(this).remove();
$("#sortable").append("<li >"+$(this).text()+"</li>");
//$("#sortable1").remove(this);
});
$("#sortable").on("dblclick", "li", function () {
$(this).remove();
$("#sortable1").append("<li >"+$(this).text()+"</li>");
// $(this).remove();
});
.listTab{
width:75px;
}
#sortable,#sortable1{
width:50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Disposition References</title>
<style type="text/css">
.listTab{
width:75px;
}
#sortable,#sortable1{
width:50%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div style="display: inline-flex;">
<table>
<tr><td>
<ul id="sortable" class="conn">
<li class="listTab" class="ui-state-default">Item 1</li>
<li class="listTab" class="ui-state-default">Item 2</li>
<li class="listTab" class="ui-state-default">Item 3</li>
<li class="listTab" class="ui-state-default">Item 4</li>
<li class="listTab" class="ui-state-default">Item 5</li>
<li class="listTab" class="ui-state-default">Item 6</li>
<li class="listTab" class="ui-state-default">Item 7</li>
</ul>
</td>
<td><table><tr><td id='add'>>></td></tr><tr><td id='remove'><<</td></tr></table></td>
<td>
<ul id="sortable1" class="conn">
<li class="listTab" class="ui-state-default">Item 1</li>
<li class="listTab" class="ui-state-default">Item 2</li>
<li class="listTab" class="ui-state-default">Item 3</li>
<li class="listTab" class="ui-state-default">Item 4</li>
<li class="listTab" class="ui-state-default">Item 5</li>
<li class="listTab" class="ui-state-default">Item 6</li>
<li class="listTab" class="ui-state-default">Item 7</li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
https://jsfiddle.net/raawdhm6/ here is my fiddle for this one..
I have a question with jQuery UI Accordion and Droppable.
How can I Drag an item from #tab-1 to #tab-2?
I have view the demo in jqueryui.com "Sortable - Connect lists with Tabs", but I can't use this for Accordion :(
HTML:
<div id="tabs">
<div id="tabs-1">
<h3>A</h3>
<div>
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div id="tabs-2">
<h3>B</h3>
<div>
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>
</div>
Script:
$(function() {
$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).accordion({
heightStyle: "content",
collapsible: true,
header: "> div > h3",
beforeActivate: function( event, ui ) {
$("#maps").width( $("#tabsMap").innerWidth() - $("#mapList").width() - 34 );
},
activate: function( event, ui ) {
$("#maps").width( $("#tabsMap").innerWidth() - $("#mapList").width() - 32 );
}
}).sortable({
axis: "y",
handle: "h3",
stop: function( event, ui ) {
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
});
You can connect the lists by changing the line:
$( "#sortable1, #sortable2" ).sortable().disableSelection();
To:
$( "#sortable1, #sortable2").sortable({connectWith['.connectedSortable']}).disableSelection();
But then you have the issue how to get the other one open to drop it into the other list.
If you add event: "mouseover" as an accordian option it won't trigger the mouseover while you're still dragging.
To achieve multiple panels open at once, you need a rather unsightly workaround, but hey, it works!:
http://jsfiddle.net/ZjvWN/2/
Credit for the beforeActivate function to the member Boaz from this answer: jQuery UI accordion: open multiple panels at once