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.
Related
I have been trying to achive functionality as follows:
-you can drag and drop multiple 450x150 onto .drop_cont
-then you can drag and drop 300x150 onto 450x150
I tried adding and removing classes but it doesn't seem to work.
Is there any way to do that, probably there is some way that I didn't think of.
Demo:
jsFiddle
Sample Code:
$(document).ready(function () {
$( ".idg_row" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".idg_column" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".drop_cont" ).droppable({
accept: ".idg_row",
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
$( ".droppableC" ).droppable();
});
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
}
Once you add the class, you need to recall droppable to run on the new elements.
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
$('.droppableC:not(.ui-droppable)' ).droppable();
}
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.
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.
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
I have a drag and drop example that reverts a draggable object back to it's original position when it is dropped in a droppable div.
My problem is that when revert is on valid on my draggable objects I am able to drag the objects to a different position on the page, My draggable objects only revert back when I drop them into the droppable div.
I want my draggable objects to revert back regardless of where on the page you drag them to?
I have tried this which works but does not work.
{
revert: 'vaild',
stop: function(){
$(this).draggable('option','revert','invalid');
}
My problem here is that my draggable objects revert but no not revert when I drop them into the droppable div.
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var dragElemId = ui.draggable[0].id;
var imgPath = $('#' + dragElemId).attr("des-image");
$( this )
.find( ".drop-image" ).removeAttr("src").attr("src",imgPath);
}
});
});
</script>
Setting the revert property to true will cause them to always revert.
$( "#draggable" ).draggable({
revert: true
});
$( "#draggable1" ).draggable({
revert: true
});
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
//ommited for brevity
}
});
Working Example: http://jsfiddle.net/yLuvv/