We Keep Coding

jqueryui sortable before start event

I try to append some data before sortable start event. Here is my example
<ul id="sortable">
<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>
Js code
$( "#sortable" ).sortable({
revert: true,
forcePlaceholderSize: true,
placeholder: "ui-state-highlight",
start: function( event, ui ) {
$(ui.item).append("<div>abc<br><br>abc</div>");
}
});
And when i drag Item 1 it look like
But i want append data before start to make placeholder resize. But maybe jquery ui not has that event. jHow can i do that thank.
Here is my example.

First, you have to reset list element’s height, then you have to apply its new height to the placeholder element. The code:
$(function() {
$('#sortable').sortable({
revert: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
start: function(event, ui) {
// we don’t want jQuery’s 20px
ui.item.height('auto');
ui.item.append('<div>abc<br><br>abc</div>');
// now set the new height to the placeholder
$(ui.placeholder[0]).height(ui.item.height());
}
});
});

How to shift elements with Drag and Drop by using HTML5?

I'm working with Drag and Drop tutorial from HTML Rocks. The current tutorial basically does a switch of the dragged element and the element it is dropped on. What was in point A goes to point B and point B goes to point A.
|A|B|C| --> |B|A|C|
|D|E|F| |D|E|F|
I'm trying to change this logic. If I drag point E, it should be in between the others.
|A|B|C| --> |A|E|B|
|D|E|F| |C|D|F|
This is the demo I have for this.
Should this be done changing the property dropEffect or it will be necessary to create a new div for adding the item we're moving?
function handleDragStart(e) {
this.style.opacity = '0.4'; // this / e.target is the source node.
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
}

I found the way to do this thanks to #tbirell
I'm using the Jquery UI library for this and change all the logic of what I did at the beginning
Instead of using DIV, I'm replacing them by UL and LI
<ul id="sortable">
<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>
<li class=" ui-state-default">Item 6</li>
</ul>
The library is the one that manages the logic of this.
$( function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
} );
A link of the working demo.

jQuery Drag and Drop inbetween two li elements

I am developing a Tree view and using JQuery Draggable and Droppable plugins to implement Drag and Drop the tree nodes.
I can drag a folder and drop over another and get the dropped element in "drop" event handler. In my drop event handler I will rearrange my nodes.
HTML Code:
<ul class="dragul">
<li class="dragli" id="1"><a class="draga">Folder1</a>
<ul class="dragul">
<li class="dragli" id="11"><a class="draga">Folder11</a> </li>
</ul>
</li>
<li class="dragli" id="2"><a class="draga">Folder2</a> </li>
<li class="dragli" id="3"><a class="draga">Folder3</a> </li>
<li class="dragli" id="4"><a class="draga">Folder4</a> </li>
<li class="dragli" id="5"><a class="draga">Folder5</a> </li>
</ul>
JS Code:
$( ".draga" ).draggable({
cursor: "pointer",
cursorAt: { top: 12, left: 18 },
helper: function( event ) {
var temp_name = event.target.innerHTML;
return $( "<div id='draghelper' class='ui-widget-header drag-helper'>"+temp_name+"</div>" );
}
});
$( ".draga" ).droppable({
drop: function( event, ui ) {
// On dropping on a node will handle here to rearrange the node.
},
});
Now I also need to drag a node and drop in between two nodes. Like need to drag "Folder5" and drop in between "Folder2" and "Folder3".
I also need to show a helper to drop in between two nodes when the dragged hover is in between the nodes.
JSBIN - Link

jQuery - Non-nested / non-descendant sibling navigation shown on hover event

I have 2 navigation areas. The second should appear when an element in the first is hovered over and it should disappear if the mouse does not move over it.
Very basically i have:
HTML
<ul class="main">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="sub">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
I want ul.1 to appear when I hover over li.1 and ul.2 to appear when I hover over li.2, and I want them both to disappear only when I am not hovering over the sub uls.
I've got it working part way:
JAVASCRIPT
var sections = new Array('1', '2');
$.each(sections, function(i, section) {
$('ul.main li.' + section).hover(
function() {
$('div.sub ul').hide();
$('div.sub ul.' + section).show();
}
);
});
This will show the correct section and hide the others, but I can't figure out how what I need so that, when the mouse moves off a ul.main li, the .sub ul disappears if it's not being hovered over.
Update: Fiddle here: http://jsfiddle.net/alluvialplains/XY4mH/

You're part of the way there #EpF. The problem is that your semantic example given above (which is possible to adhere to) is trying to capture a mouseleave event and while it's possible to use jQuery's .not() function to achieve this, it would be expensive. Really, the smartest way to do this is to have an outer wrapper for your whole navigation (wrapping all div's you've got in your existing fiddle) and then bind your show() event to mouseenter, while separately binding your .hide() event (the one for ALL .subz) to an event triggered on mouseleave for the wrapper div.
Given the following HTML:
<div id="nav-wrap">
<ul class="mainz">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="subz">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
</div><!-- /END #nav-wrap -->
You can achieve the effect with the following javascript
$( document ).ready( function () {
var $ul = $( '.subz ul' ).hide();
$( '.mainz li' ).on( 'mouseenter', function(event){
$ul.hide().eq( $( this ).index() ).show();
});
$( '#nav-wrap' ).on( 'mouseleave', function(event){
$ul.hide();
});
});
Here is a JSFiddle of it in action: http://jsfiddle.net/XY4mH/4/
Also, I should note that the .hover() function is deprecated in jQuery for quite a while now and could disappear sometime soon. Note that I used the .on() function, which is the correct way to bind these kinds of events in jQuery.

$( document ).ready( function () {
$( '.main li' ).on( 'click', function () {
$( '.sub ul' )
.hide()
.eq( $( this ).index() )
.show();
});
});
That should do the trick. But as #Mottie said, nesting menus would work better / more symantecly
Edit: Sorry this is working on click. Just a sec and I'll have it updated
$( document ).ready( function () {
var $ul = $( '.sub ul' ).hide();
$( '.main li' ).hover(
function () {
$ul
.hide()
.eq( $( this ).index() )
.show();
},
function () {
$ul.hide()
}
);
});

Jquery list drag drop

I have a Jquery Drag Drop List which I want to update immediately in MYSQL using Jquery Ajax Post.
Because I can drag elements between lists (more than one list), I need to get the parent ID (parent being list category ID - where the draggable is dragged to)
When I drag from one category / list to another I am always given the former ID..
For example:
CAT 1 ------------ CAT 2
If I was to drag something from CAT1 to CAT2 - the ID would be CAT1 and not the new category ID...
I have added my codes below:
Jquery:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.sortable.js"></script>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".mouseup").mouseleave(function(){
var sparent = $(this).parent().attr("id");
alert(sparent);
});
});
</script>
LIST HTML:
<div class="demo">
<div class="box">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default mouseup">Item 1</li>
<li class="ui-state-default mouseup">Item 2</li>
</ul>
</div>
<div class="box">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight mouseup">Item 1</li>
<li class="ui-state-highlight mouseup">Item 2</li>
</ul>
</div>
</div>
Any help would be appreciated.
Thank you in advance!

What you want is here:
http://jqueryui.com/demos/draggable/#events
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) { alert($(ui.item).parent().attr("id") }
}).disableSelection();
Placing your code in the stop callback will allow you check the right ID.

Event that you need to handle is received.
$(".connectedSortable" ).on( "sortreceive", function(event, ui) {
alert(ui.item.parent()[0].id);
// also ui.sender will hold original list, from where element was taken
});
EDITED: depending on the fact if you need to handle case when items were just reordered, ie you drag and drop within same list, or not you are going to use received or stop event.
received will fire only in case you drag to another list.
stop will fire even if you leave item in the same list.