We Keep Coding

Add items to sortable

I would use jqueru ui and sortable, but I have some silly mistake and I can not change the item added by the "entry-add" item.
Demo: https://jsfiddle.net/7p0w1gpe/3/
$(function() {
$('.test').sortable({
connectWith: ".test"
}).disableSelection();
});

You are applying the connectWith to the already present divs with the test class. When you add a new div with the class test and make it sortable, you are forgetting to also add the connectWith.
I've added it in the fiddle below.
https://jsfiddle.net/ksxLymox/
$(function() {
$('.test').sortable({
connectWith: ".test",
}).disableSelection();
});
$(document).on('click', '.add-done', function() {
$('<div id="sortable1" class="test connectedSortable"><a class="ui-state-default">Item 1</a></div>').insertBefore('.add-done').sortable({connectWith: ".test"});
console.log("add");
});
$(document).on('click', '.entry-add', function() {
$(this).parent().find('.test').append('new items').sortable({connectWith: ".test"});
});
To make your code even better you could reuse a function to make a div sortable.

Insert element directly into div using Jquery ui Droppable

I have this system to create a list of chosen images by dragging and dropping the image items into a div id="trash".
This system is a copy from the photo manager in the jquery ui page:
Link
What I'm trying to implement is to have a arrow-up icon in each image sample to have it be inserted into the list without having to drag it.
I've managed to append the element but I'm having trouble to call the function deleteImage() so it animates like the animation after you drop the element inside the list.
Here is a JSFIDDLE of the project
This is what I have so far:
$('a.quick_insert').click( function(){
var sample = $("<li />").append($(this).closest($('li')).clone()).html();
$(this).closest($('li')).fadeOut(function(){
$('#trash').append(sample).fadeIn(function() {
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
$sample.find( "a.ui-icon-trash" ).remove();
$sample.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$sample.animate({ width: "48px" }).find( "img" ).animate({ height: "36px" });
});
});
});
});
Thank you

Try change your code in:
// Quick Insertion
$('a.quick_insert').click( function(){
deleteImage( $(this).parent() );
});
so you will reuse the same function of the example by passing the current clicked container as element.
Demo: http://jsfiddle.net/gqSaq/5/
EDIT
To let the recycle work correctly you must delegate its click usin on, because the element is dynamically created.
Code:
// Quick Insertion
$('#gallery li').on('click', 'a.quick_insert', function () {
deleteImage($(this).parent());
});
Demo: http://jsfiddle.net/gqSaq/6/

Make the collapsible sortable accordion sort in collapse shape

I have accordion is collapsible and sortable.
Look here full code in action http://jsfiddle.net/wvtPw/
And this the JS code I'm using
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true
})
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
The only problem when I'm trying to sort the expanded div group is big and hard to sort and when its the first div and you drag it, you can't see below it because if the height size
See this image below is example of collapsed div, see how easy to use and you can see below it easily.
So what I need to reach is when the user trying to sort expanded div, the flying div turn into collapsed shape like this
And when he drop the element just turn back to expanded like normal

I recommend doing the following:
$(function() {
var active = false,
sorting = false;
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true,
activate: function( event, ui){
//this fixes any problems with sorting if panel was open
//remove to see what I am talking about
if(sorting)
$(this).sortable("refresh");
}
})
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
start: function( event, ui ){
//change bool to true
sorting=true;
//find what tab is open, false if none
active = $(this).accordion( "option", "active" );
//possibly change animation here (to make the animation instant if you like)
$(this).accordion( "option", "animate", { easing: 'swing', duration: 0 } );
//close tab
$(this).accordion({ active:false });
},
stop: function( event, ui ) {
ui.item.children( "h3" ).triggerHandler( "focusout" );
//possibly change animation here; { } is default value
$(this).accordion( "option", "animate", { } );
//open previously active panel
$(this).accordion( "option", "active", active );
//change bool to false
sorting=false;
}
});
});
DEMO:
http://jsfiddle.net/m939m/2/
Please let me know if you have any questions! Cheers!

have a look at the documentation for sortable
look at the sortable event start( event, ui ). The logic would then check to see if the item is expanded. if so then close it. after sort expand it again
http://api.jqueryui.com/sortable/#event-start

Add the code below before the stop event on your sortable object.
over: function(event, ui) {
$('#accordion').accordion({active:false});
},
http://jsfiddle.net/wvtPw/8/

While this code works for the collapsing/expanding issue when sorting, the "activate"-function causes an issue regarding opening the first item in the accordion. Opening and closing the first item makes it impossible to reopen. Continuing with the next item, same thing happens. In the end the complete list of items will not be possible to expand.

Since this is more of a UX question, my suggestion is to offer a different UX. I would disable sorting by default and offer a button to toggle sorting on/off. When sorting is enabled, collapse all the fields and disable the accordion.
$( '.accordion-toggle' ).on('click', function() {
$( "#accordion" ).toggleClass( 'sorting' );
});
$( "#accordion:not(.sorting)" )
.accordion({
header: "> div > h3",
collapsible: true
});
$( "#accordion.sorting" )
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
EDIT: (2018-06-18)
I missed that this is jQuery UI. You probably want to use the enable/ disable features.
$( '.accordion-toggle' ).on( 'click', function() {
if ( $( '#accordion' ).hasClass( 'sorting' ) ) {
$( '#accordion' ).removeClass( 'sorting' )
.accordion( "enable" )
.sortable( "disable" );
} else {
$( '#accordion' ).addClass( 'sorting' )
.sortable( "enable" )
.accordion( "disable" )

If an item was not dragged to a specific location, then have it go to back to original position?

I made a quick drag and drop type menu. Basically I made it so you drag an item from a list into the trash div, and it will give you an alert saying "gone"
I want to make it so that you can't just drag the item anywhere. It has to go into the trash or ".list4" it's called, or else send it back to it's original position.
Here is the JSFiddle: http://jsfiddle.net/Gdze8/
Here is the Javascript:
$( init )
function init() {
$(".contentItem").draggable();
$(".list4").droppable( {
drop: handleDropEvent
});
}
function handleDropEvent ( event, ui ) {
var draggable = ui.draggable;
alert("Gone")
}
Also, while I'm here, would there be a way to delete the item once it goes in the "trash"?

Try this
$(".contentItem").draggable({ revert: 'invalid' });
JS Fiddle Demo

use :
$( ".draggable" ).draggable({ revert: "invalid" });
to get it back to its original position.
use:
$( "#dorp" ).droppable({
accept: ".draggable",
drop: function( event, ui ) { ui.draggable.remove(); }
});
to remove an element dropped.
HERE IS A DEMO : jsfiddle
AND YOU CAN USE { helper: "clone" } : jsfiddle2

append a div to another div only once on droppable drop

I have a draggable element , that when its dropped onto the target, it adds a delete button:
$( "#committed" ).droppable({
hoverClass: 'drophover',
drop: function( event, ui )
{
$(function()
{
var done;
if( done ) return;
done = true;
$(ui.draggable).append('<button class="delBtn" type="reset">X</button>');
$(ui.draggable).draggable( "option", "disabled", true );
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
}
Once its been dropped, it then becomes sortable. The issue is , everytime the element is sorted, the Delete button gets added again. As there are multiple elements being dragged and dropped and then sorted, so .length>? doesn't work.
I essentially need
If (this.delBtn exists)

I updated another jsfiddle project, there the button is added only if the button does not exist on the draggable object yet: jsfiddle example
The trick here is this:
if ($(ui.draggable).find('button.delBtn').length == 0) {
$(ui.draggable).append('<button class="delBtn" type="reset">X</button>');
}
It checks if the dragged item contains a button with class delBtn. If not then it adds the button.

Wouldn't something like this sort you out?
if($('button.delBtn').length > 0)
{
// The delete button exists...
}