We Keep Coding

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 dragged element snap to the top element instead of the bottom element jquery drag and drop

Let's say I have two drop-zones one below the other and I have a draggable element whose height is equal to the sum of the heights of the drop-zones and the spacing between them. When I drag the element over both the zones and release the mouse, the element gets appended to the bottom drop-zone rather than the top drop zone. What I need to do is if I place the element over both the zones , I want the element to drop into the first zone and not the second zone.
This is what I have tried so far.
FIDDLE
and this is the script
<script type="text/javascript">
var display_under_drag = '';
$(document).ready(function(e) {
$( ".draggable_display" ).draggable({revert: "invalid"});
$( ".draggable_display" ).on( "dragstart", function( event, ui ) {
display_under_drag = $(this).attr('id');
$('.droppable_display').each(function(index, element) {
//$(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
});
});
$( ".draggable_display" ).on( "drag", function( event, ui ) {
$(this).css('z-index','3001');
$('.droppable_display').each(function(index, element) {
if($("#"+display_under_drag).hitTestObject($(this)))
{
//console.log($('#'+display_under_drag).data().display_type);
//console.log($(this).data().dim);
console.log($(this).attr('id'));
$(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
}
else
{
$(this).css({'border-width':'0px'});
}
});
});
$( ".droppable_display" ).droppable({greedy: true,tolerance: 'touch',accept: ".draggable_display"});
$( ".droppable_display" ).on( "drop", function( event, ui ) {
//alert(display_under_drag);
if($('#'+display_under_drag).data().display_type == '2x1')
{
$('#'+display_under_drag).appendTo($(this));
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px','z-index':'1000'});
});
$(this).css('z-index','3000');
//$('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
$('#'+display_under_drag).appendTo($(this));
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px','z-index':'1000'});
});
$(this).css('z-index','3000');
$('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
}
});
$( '.draggable_display' ).on('mouseup',function(e){
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px'});
});
});
});
</script>
Can someone help me out.
EDIT: There might multiple dropzones like this stacked next to each other. Like a 3x3 grid. In each case , the top dropzone should be the one which should accept the drop and not the bottom one. For instance , if I hover over column 1 => row 1 and row 2 , col1 row1 should be the dropzone. If I hover over column 1 => row 2 and row 3 , col1 row2 should be the dropzone.
It's for a game we are trying to develop.The drag and drop should work the way I have posted in the question.

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

Remove draggable functionality when button is clicked

In this fiddle - http://jsfiddle.net/adrianjsfiddlenetuser/zyUkd/35/ I'm attempting to remove the draggable functionality of all divs that are styled with .myDivs when the button 'Remove Draggable' is clicked.
The function call $('.myDivs').draggable('disable'); does not seem to achieve this ?

First of all, your click handler is made out of a $(document).ready() function, which means that it can be attached even if the DOM isn't totally loaded. Then, you didn't make the elements draggable with draggable but with sortable, so you should use $(elements).sortable('disable'):
$(document).ready(function() {
var els = $('.connected');
els.sortable({
connectWith : ".connected",
items : ".myDivs:not(.excludeThisCss)"
}).disableSelection();
$("#button").click(get);
function get() {
els.sortable('disable');
}
});
Your updated JSFiddle here: http://jsfiddle.net/zyUkd/38/

Problem is that
$("#button").click(get);
is not in right place it must be inside onload event handler. So your code must look like this:
$(function() {
$( ".connected" ).sortable({
connectWith : ".connected",
items : ".myDivs:not(.excludeThisCss)"
}).disableSelection();
$("#button").click(get);
});
function get() {
$('.myDivs').draggable('disable');
}

$(function() {
$( ".connected" ).sortable({
connectWith : ".connected",
items : ".myDivs:not(.excludeThisCss)"
}).disableSelection();
$("#button").click(function(){
$( ".connected" ).sortable( "option", "disabled", true );
});
});