We Keep Coding

jquery ui greedy not working as it should

So what i'm trying to do is to place an item( the diamond shaped item ) in the droppable and that item creates 2 sub-droppables in wich you place items, but the thing is i can't seem to get the "greedy" function to work with the generated droppables. Currently i'm only testing it on the second item - left side when generated.
my My jsFiddle .
This is the main dropzone.
$(".objects").droppable({
accept: "#block",
drop: function (ev, ui) {
$(".test").append('Dropped!');
}});
This is the sub-dropzone. On drop there should appear Dropped123! in the bottom code paragraph.
$(".true").droppable({
greedy:true,
accept: "#block",
drop : function (ev, ui) {
$(".test").append('Dropped123!');
}
});

Your problem is that you are trying to bind droppable before you actually have the elements, I have changed your fiddle so now you bind the event to the actual element:
http://jsfiddle.net/L22d4x2x/7/
var divTrue = $('<div class="true n_block'+ cloneCount1 +'"></div>');
$(".n_block"+ cloneCount1 ).append(divTrue);
divTrue.droppable({
greedy:true,
accept: "#block",
drop : function (ev, ui) {debugger;
$(".test").append('Dropped123!');
}
});

jQuery droppable zone in droppable zone

I have a droppable unordered list named <ul class="droppable">. Inside the unordered list I have dynamicly generated list items named <li class="placeholder"></li>, which are also droppable.
When dropping a draggable item between a placeholder, all works fine. But when dropping a draggable item on the <li class="placeholder"></li> itself, the draggable item gets appended to the placeholder and the unordered list.
So I get a double clone of it.
Here's a jsfiddle to have a visual example. I'm aware that it is logical that I get a double clone on my page, but I don't know how to disable it...
Any help is greatly appreciated!
UPDATE: If you drag a draggable item verticaly over a droppable element, they append automatically? How is that possible?

One approach you could try to solve this would be to move all your behaviors to your sortable and use droppable only to make a switch to determine the behavior you need. That way, you can handle everything at one place, which should resolve some of the unwanted effects of having both sortable and droppable on the same elements. Like this:
In your droppable you set the switch on over and out, and set the objects you need.
$("li.placeholder").droppable({
accept: "li.to-drag",
hoverClass: "correct",
activeClass: "active",
revert: false,
tolerance: "pointer",
over: function (e, ui) {
curDrag = ui.draggable;
curTarget = e.target;
curThis = $(this);
overSortable = true;
},
out: function (e, ui) {
overSortable = false;
},
drop: function (event, ui) {
}
});
Then, in beforeStop event of sortable, you check if the variable overSortable is true or not and set the behaviors there. All that refers to ui.draggable, this, and event.target will need to be replaced by the objects you set in droppable. An event better way would be to make a function handling all these behaviors and pass these as arguments.
beforeStop: function (e, ui) {
if (overSortable) {
curDrag.addClass('placeholder');
var dragging = curDrag.find("img").remove();
curThis.append(dragging).addClass("dropped");
curThis.droppable('disable');
var day = curDrag.attr('data-id');
var index = $(curTarget).index();
//...
} else {
ui.item.addClass('placeholder')
}
There are still adjusments to make, it's not completely clear what exactly should happen and when, but this can make it easier to work instead of trying to manage multiple events being fired when you drop an element, you only manage one.
http://jsfiddle.net/ts290vth/4/

Managed to get it working for you:
function dropping () {
$("li.placeholder").droppable({
accept: "li.to-drag",
hoverClass: "correct",
activeClass: "active",
revert: false,
tolerance: "pointer",
drop: function (event, ui) {
var dragging = ui.draggable.find("img");
$(this).append(dragging).addClass("dropped");
$(this).droppable('disable');
var day = $(ui.draggable).attr('data-id');
var index = $(event.target).index();
$(this).attr("data-id", day);
$(this).attr("date-order", index);
$(this).addClass("drop-"+ index);
$(this).attr("data-content", "");
NOTICE: the var dragging = ui.draggable.find("img"); this line was making you duplicated copies at drag and drop so you just had to remove the clone();.
it created clones of your dragged items at dest.
Now Notice this:
$("#dropzone").droppable({
accept: "li.to-drag",
revert: false,
tolerance: "pointer",
drop: function (event, ui) {
$(this).append(dragging);
//$("li.to-drag").addClass("placeholder");
$(this).droppable('disable');
}
});
}
Something with the placeholder class is causing you troubles.
Hope this helps.

Jquery drag n drop photo editor with clone on parent container

I am trying to implement a banner management system and was planning on using the jquery Photo Manager. The problem I am currently facing is that I cannot seem to get the parent image to clone on the primary container.
Here is the link to the fiddle for the codes (It is basically the same from the jQuery UI site)
What I am intending to create is to allow users to drag or add the image from the left to right and users can add the same image multiple times but as soon as the image is added to the right it disappears from the left.
I was looking at this piece of code for solution but do not see any removal of DOM elements specific to the item getting moved. only items removed from the DOM are the icons.
function deleteImage($item) {
$item.fadeOut(function () {
var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);
$item.find("a.ui-icon-trash").remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function () {
$item.animate({
width: "48px"
})
.find("img")
.animate({
height: "36px"
});
});
});
}
can someone help me out with an explanation.
Thanks in advance.

Actually using the jquery .clone() function did the trick. All I had to do was instead of passing the object of the element, I passed their clones with the events.
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
deleteImage(ui.draggable.clone(true));
}
});
setting the parameter to true for the clone, makes a deep copy of the element including all the events.
$("ul.gallery > li").click(function (event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-trash")) {
deleteImage($item.clone(true));
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
$item.remove();
}
return false;
});
Here is the link to the working fiddle for reference. Link

Constrain draggable element after it has been dropped

Basically what I have is a set of doodads, and what I need to do is to be able to drag any item in that set into a containment box. Once they are in the box, they can still be moved around and manipulated freely, but they can't be taken out of the box again though they can be deleted.
The doodads are also set to clone as a user can have more than one of the item in the box if they so desire.
So the two parts are, set up the doodad list (already done), and then make it draggable so that it can be dragged into the droppable div box. Then the second part is that once it's in the div box, it must be draggable again, not clonable, and also contained in the box.
Here's my JS code:
$(document).ready(function() {
function MakeDraggable(item) {
item.draggable({
revert : "invalid"
});
}
$(".doodad").draggable({
helper : 'clone',
scroll : true
});
$(".dropped").draggable ({
containment: ".box"
});
$(".box").droppable({
accept : ".doodad",
activeClass : "ui-state-default",
hoverClass : "ui-state-hover",
drop : function(event, ui) {
var droppedItem = $(ui.draggable).clone();
//droppedItem.class = ".dropped";
droppedItem.draggable();
//ui.draggable.draggable('option', 'revert', false);
//droppedItem.draggable();
$(this).append(droppedItem);
}
});
});
I've tried many things. I tried changing the element's ID to something else so that it can take on that class' draggable attributes. I've also tried programming it within the drop function, but I'm having issues.
I have no idea how to refer to the draggable element just dropped in order to manipulate it. I was told it was $(ui.draggable), or $(ui.draggable).clone(), but when I try referring to that and calling draggable on it with my desired options, it doesn't work. The best I've gotten was that it was draggable after dropping, but it kept duplicating itself and was not contained within the box.
Any help would be greatly appreciated, and I am new to all of this stuff. I did look at the JQuery API but it didn't help me much in this regard.
Edit:
My Html is:
<body>
<img src="doodads/i1.gif" class="doodad">
<img src="doodads/i2.gif" class="doodad">
<img src="doodads/i3.gif" class="doodad">
<img src="doodads/i4.gif" class="doodad">
<div class="box" />
</body>
CSS is:
.box {
width:500px;
height:500px;
background: orange;
}

You can set a class on the dropped element e.g. copied and than check if the dropped element have already that class and if so stop the cloning.
To constrain the movement inside the box you can use containment option of draggable:
Constrains dragging to within the bounds of the specified element or
region.
Code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied');
droppedItem.draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/ufHMm/
EDIT
To get the dropped element position we had to calculate and use it, using:
$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left
we get the helper position along its container.
Final code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/ufHMm/3/

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