We Keep Coding

Detect unacceptable drag drop in jQuery-ui droppable

I'm using jQuery-ui draggable, droppable. My main container should only accept plugin-containers which also are droppables which accept plugins. Below is the code my code snippet:
$("#main").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".plugin-container",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$("<div></div>").html(ui.draggable.html()).appendTo(this).droppable({ accept: '.plugin', drop: function (event, ui) { $('<div></div>').html(ui.draggable.html()).appendTo(this); } }).sortable();
}
});
The problem is that when a plugin is dragged into the main container, I want to:
Hightlight Plugin containers that plugin can be dropped
If plugin is dropped in the main container show an error message
but the droppable over and drop methods only fire if the dragged item is acceptable and won't fire for unacceptable drags (in this case .plugin). what can I do here?
Here is the fiddle

I think I have found THE EXACT SOLUTION TO YOUR PROBLEM !!
Check out this FIDDLE
CODE:
$("#main").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
//accept: ".plugin-container",
drop: function( event, ui ) {
if(ui.draggable.hasClass('plugin'))
{
alert('This element cannot be dropped here !');
$(ui.draggable).draggable({ revert: true });
}
else if(ui.draggable.hasClass('plugin-container'))
{
//console.log('context = ');
//console.log(ui.draggable.context);
$( this ).find( ".placeholder" ).remove();
$("<div></div>").addClass('plugin-container')
.html(ui.draggable.html())
.appendTo(this)
.droppable({
accept: '.plugin',
greedy:true,//this will prevent the parent droppables from receiving the droppable object
drop: function (event, ui) {
$(ui.draggable).draggable({ revert: false });
$('<div></div>')
.addClass('plugin')
.html(ui.draggable.html())
.appendTo(this);
}
}).sortable();
}
}
});
$(".menu div").draggable({
appendTo: "body",
helper: "clone"
});

You can make all draggabbles acceptable and then in your over and drop methods filter the wanted/unwanted divs and show error message.
drop: function( event, ui ) {
var dropped = ui.draggable.attr('class');
if (dropped == ".plugin") {
// show alert
} else {
}
There is also the 'revert' option that you can use to revert a dragged element back to its original position.

jQuery Drag/Drop Example: Ordered List does not look like ordered list at the destination

I can drag and drop, it works very good. But at the destination place the ordered list does not work properly. It should look like a ordered-list not like a pile. The destination box should grow with new element, but it does not work too.
Where is my mistake? Here is the code: http://jsfiddle.net/QJ54x/
That's the jQuery-Code so far:
$( init );
function init () {
$('.draggable1').draggable ({
containment: "#ddSurvexFormDragDropArea",
scope: "d1",
stop: draggable1Stop,
helper: "clone",
});
$('#droppable1').droppable({
scope: "d1",
accept: ".draggable1",
hoverClass: "droppable1HoverClass",
drop: droppable1Drop,
});
}
function draggable1Stop(event,ui) {
// alert ('draggable1Stop');
// $(this).remove();
ui.helper.clone().appendTo($(this).parent());
$(this).remove();
}
function droppable1Drop (event, ui) {
}

OK, I got it, here is the answer (another simplified example):
http://jsfiddle.net/cKs5u/
That's the corresponding part:
$( "#cart ol" ).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 );
}
})
given by example from jquery-api online.

Drag and drop function matching images

i made a dropspot for drag and drop function in a div which has image + dropspot but unfortunately my function doesnt work :( am i wrong ?
http://jsfiddle.net/6tsfh/
$(function() {
$( ".right img" ).draggable
({
revert: "invalid",
helper: 'clone'
});
$( "#dropspot0" ).droppable({
tolerance: 'fit',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo($("#dropspot0"));
}
});
});

Check this jsFiddle
I think JqueryUI library was not included in jsfiddle.
$(function() {
$( ".right img" ).draggable
({
revert: "invalid",
helper: 'clone'
});
$( "#dropspot0" ).droppable({
tolerance: 'intersect',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo($("#dropspot0"));
}
});
});

jQuery UI Draggable on droppable element

I have been trying to put a Draggable element on Droppable element, by jquery ui, and i almost succeded as the code working halfly, if you move a little the elements on the droppable, they are changing their place, and i don't want it to, i want they will stay where they are, but if you drag them outside of the droppable area, they will come back to their natural place.
the code i've done:
HTML:
<div class="cart">
<div class="products on">1</div>
<div class="products on">2</div>
</div>
<div class="products">3</div>
<div class="products">4</div>
<div class="new"></div>
Jquery:
$(function() {
$(".products").draggable({
appendTo: "body",
revert : function(event, ui) {
if($(this).attr("class").split(' ')[1] == 'on') {
$(".new").append($(this)); $(this).removeClass("on"); return !event;
}else{
$(this).data("uiDraggable").originalPosition = {top : 0,left : 0}; return !event;
} },
start: function(event, ui) { ui.helper.data('dropped', false); },
stop: function(event, ui) {
if(!ui.helper.data('dropped')) {
$("#"+$(this).html()).remove();
}
}
});
$(".cart").droppable({
drop: function( event, ui ) {
var text = ui.draggable.html();
$(".cart").append('<div id="'+text+'">'+text+'</div>');
ui.draggable.data('dropped', true);
}
});
});
http://jsfiddle.net/yreKf/8/

just remove destroy draggable on drop event here is working jsfiddle
drop: function( event, ui ) {
var text = ui.draggable.html();
$(".cart").append('<div id="'+text+'">'+text+'</div>');
ui.draggable.data('dropped', true);
$(ui.draggable).draggable({
revert: "invalid"
});
}

This might be the answer you are looking for
http://jqueryui.com/droppable/#revert
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});

Jquery UI draggable and droppable with option of resizing and sorting

Here is my code on Jsfiddle: http://jsfiddle.net/sachinprasad/753KX/1/.
Here is my jquery code:
$(function() {
$("#sortable").sortable({
revert : true
});
$(".draggable").draggable({
connectToSortable : "#sortable",
helper : "clone",
revert: function(valid) {
if(valid) {
//alert("Valid");
$("ul#sortable li").resizable();
$("#sortable").sortable({revert : true });
$("ul, li").disableSelection();
}
return !valid;
}
});
$("ul, li").disableSelection();
$("ul#sortable li").resizable({
});
/* $( "#sortable li" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" );
return false;
}
}); */
});
The droppable doesn't seem to be working as even if I'm comment the droppable, its functionalities remains same.
What I have to do is:
Make item1,item2 .... as drop containers where facebook or twitter items can be dropped but only one at a time.Eg If twitter is dropped it should not allow any other items to be dropped and even twitter.
Make the dropped items sortable and users can also resize the items.
Any help will be greatly appreciated.