I'm trying to optimize response time on a page with a "large" table that is a jquery droppable that accepts ~6 draggables. Like others I've seen poor response time when making each of the droppables. I've read both this post and this post, but I can't seem to get my code to work.
My basic problem is I don't know how to get a reference to the element in which the draggable was dropped. It seems the only element I can get access to is the actual draggable.
Here's how I've defined my jquery code:
$( "#grid table" ).droppable({
//disabled: 'true',
//activate: function (event, ui) {
// console.log("Activated table")
//},
//over: function (event, ui) {
// console.log("Dragged over")
//},
//activeClass: "ui-state-default",
//hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
tolerance: 'pointer',
drop: function( event, ui ) {
console.log("draggable DROPPED!!!");
//$( this ).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
var cell = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop());
console.log('Dropped cell is'+cell);
console.log(ui.position)
console.log(ui.offset)
console.log(document.elementFromPoint(ui.position.left, ui.position.top))
$(cell).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
console.log('Setting background to:'+ui.draggable.attr("colorValue"));
}
Any help you can provide is much appreciated.
$(this) in drop: function( event, ui ) refers to the element in which the draggable was dropped
Related
long time reader, first time poster. I'm creating a webpage with JQuery drag and drop div's and wanted to know how one would go about making it so once a draggable div has been dropped on a "droppable" div, not only is the class of the draggable div changed but one of the child div's within the draggable is changed to a different class?
The HTML is basically-
<div class="dropbox"></div>
and then the JQuery script for this is-
<script type='text/javascript'>//<![CDATA[
$(function(){
$("#draggable").draggable({
drag: function(event, ui) {
$(this).removeClass('dropClass');
}
});
then the droppable section is called like so later in the script-
$(".dropbox").droppable({
tolerance: 'intersect',
over: function(event, ui) {
$('.ui-draggable-dragging').addClass('hoverClass');
},
out: function(event, ui) {
$('.ui-draggable-dragging').removeClass('hoverClass');
},
drop: function(event, ui) {
$('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass');
}
});
If a child div for draggable has a class called "indicator", is there a way to append the drop: function event to include
$('.indicator').removeClass('hoverClass').addClass('setOn');
I realize that the first section creates the class that "draggable" which becomes a part of "ui-draggable-dragging". Is there a way of triggering another class "indicator" without an event which I can call when the drop: function is executed?
Hope this makes sense, I haven't been able to find an answer to this elsewhere.
Try this JavaScript ..
$("#draggable").draggable({
drag: function(event, ui) {
$(this).removeClass('dropClass');
$(this).children('.indicator').removeClass('setOn');
}
});
$(".dropbox").droppable({
tolerance: 'intersect',
over: function(event, ui) {
$('.ui-draggable-dragging').addClass('hoverClass');
},
out: function(event, ui) {
$('.ui-draggable-dragging').removeClass('hoverClass');
},
drop: function(event, ui) {
$('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass');
$('.ui-draggable-dragging').children('.indicator').addClass('setOn');
}
});
Hope this will help you ..
Ok, I have an issue with drag and drop.
What they do, they click a button, it initializes the whole drag and drop.
function sortElements() {
// Place droppable elements
var x = 0;
$("#content-body div[data-type='column'],#content-body div[data-type='carousel']").each(function() {
var el = $(this);
if(x == 0){
el.before('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><\/div>');
x++;
}
el.addClass('edit_el').after('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><\/div>');
x++;
el.append('<div class="drag-handle"><i class="fa fa-arrows"></i></div>');
var w = el.width();
el.css('width',w+'px');
});
$("#content-body div[data-type='insertable']").each(function() {
var el = $(this);
el.prepend('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><\/div>');
x++;
});
// Swap entire columns
$("#content-body div[data-type='column']").draggable({
refreshPositions: true,
helper: "clone",
handle:'.drag-handle',
appendTo: "body",
zIndex: 10000,
start: function( event, ui ) {
$(".neoDroppableEle").addClass('dragging');
},
stop: function( event, ui ) {
$(".neoDroppableEle").removeClass('dragging');
}
});
$(".neoDroppableEle").droppable({
accept: "div[data-type='column']",
tolerance: "pointer",
hoverClass: "focus_in",
activeClass: "focus_in_active",
drop: function(event, ui) {
cur_ele = this.id;
var el = ui.draggable;
var html = el.html();
el.remove();
$("#" + cur_ele).replaceWith('<div class="row" data-type="column">'+html+'</div>');
}
});
// Swap individual photos within columns
$("#content-body div[data-type='imagewrap']").each(function(){
$(this).draggable({
revert: "invalid",
helper: "clone" ,
zIndex: 10001,
});
$(this).droppable({
accept: "div[data-type='imagewrap']",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var draggable = ui.draggable, droppable = $(this);
draggable.swap(droppable);
}
});
});
}
When they are done, they click the button again.
function sortElementsComplete() {
$(".ui-droppable").droppable("destroy");
$(".ui-draggable").draggable("destroy");
$(".edit_el").removeAttr('style').removeClass('edit_el');
$(".neoDroppableEle").remove();
$(".drag-handle").remove();
}
This all runs and works great!
But now I am tryng to save the HTML code after each drop for undo's. And when I save the undo, I need to remove all additional classes and elements my function to drag and drop add's. Because they may not be in the sorting area when they click undo and do not want drag handles and my borders I set up as visual aids just appearing.
So now I have:
$(".neoDroppableEle").droppable({
accept: "div[data-type='column']",
tolerance: "pointer",
hoverClass: "focus_in",
activeClass: "focus_in_active",
drop: function(event, ui) {
cur_ele = this.id;
var el = ui.draggable;
var html = el.html();
el.remove();
$("#" + cur_ele).replaceWith('<div class="row" data-type="column">'+html+'</div>');
setTimeout(function(){
sortElementsComplete();
editor_add();
},1000);
}
});
The above with the timeout code always fails with:
Error: cannot call methods on droppable prior to initialization;
attempted to call method 'destroy'
How so? It IS initialized and running. After the drop I should be able to destroy it, make my save and rebuild it. Using disable gives the same error. To me the error makes no sense.
After editor_add() is ran, it re-builds whatever they were doing, in this case it will fire sortElements(); after the save.
But the below runs fine?
// Swap individual photos within columns
$(this).droppable({
accept: "div[data-type='imagewrap']",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var draggable = ui.draggable, droppable = $(this);
draggable.swap(droppable);
setTimeout(function(){
sortElementsComplete();
editor_add();
},250);
}
});
It will error if I do not have the timeout above. Seems 250 is the min, anything lower it errors. But the first one will not ever work, no matter how long or short I make the timeout.
Really hope this makes sense.
Maybe if I used
var draggable = ui.draggable, droppable = $(this);
draggable.swap(droppable);
On it instead it would work. o.O
How can i make 2 divs which contain images to drag-drop and fit each other.My code looks like :
Edit: link for project http://www.fileshare.ro/e30355196
$(function() {
$( "#right img" ).draggable
({
revert: "invalid"
});
$( "#left" ).droppable({
tolerance: 'fit',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo($("#left"));
}
});
});
Please find attached fiddle:
Hopefully this will give you a good start.. like wolff said, I aint downloading an entire project writing the whole thing..
http://jsfiddle.net/jFIT/qs3TF/1/
Best of luck with it..
$(document).ready(function () {
$('#pieces>div').draggable();
$('#puz>div').droppable({
accept: "#pieces>div",
// activeClass: "ui-state-hover", //can be cool to have these..
// hoverClass: "ui-state-active",
drop: function (event, ui) {
$(ui.draggable).detach().css('background-color', 'red').css({ //you wont need this as your classes will all stay the same.
top: 0,
left: 0,
height:100,
width: 100
}).appendTo(this);
//disable draggable on them also..
}
});
});
I will simplify my explanation so you get what I am doing. I have two div's and I set up portlets as shown here, however I am dynamically injecting my portlets, no big problem there.
<div id="mainallapplicant" class="myrow"></div>
<div id="contingent_right" class="myrow"></div>
Here is the JavaScript
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
beforeStop: function( event, ui ) {}
});
I am trying to allow a maximum of only one droppable into mainallapplicant. If there is one already there, I will show a confirmation dialog and depending on the answer, I cancel the drop or move out the existing item and replace it with the new item. I tried the following but I am getting nowhere.
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
start: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.sender.draggable("cancel");
}
},
stop: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.item.remove();
// Show an error...
}
}
});
You can use start to get the current count of portlet elements, then use stop to do the checking
Also notice I added class names to each div to allow only one div to have a maximum of 1 portlet
$(document).ready(function () {
$.count = 0;
$(".myrow").sortable({
connectWith: ".myrow",
revert: true,
start: function () {
$.count = $(".myrow").has(".portlet").length;
console.log("Start " + $.count);
},
stop: function (event, ui) {
if ($(ui.item).parent(".myrow").hasClass("left")) {
if ($.count == 2) {
$(".myrow").sortable("cancel");
}
}
}
});
});
DEMO: http://jsfiddle.net/Ue4dq/
I have a cloned element which I am able to drag however I wish to drop it in a specific div element and if valid not revert back to its original position, however it is always reverting back to its original position whether it is valid or not.
I am currently using the code below:
$("ul#objectsList li").draggable({
revert: 'invalid',
snap: "#objectsDropBox",
snapMode: "inner",
helper: function() { return $(this).clone().appendTo('body').show(); },
start: function(e, ui) { $(ui.helper).addClass("ui-draggable-helper");}
});
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function( event, ui ) {
alert('hi');
}
});
Why is it not staying in the div when a valid draggable is dropped?
Try this
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function (event, ui) {
$(this).append(ui.draggable);
//if you want to retain the element use ui.draggable.html() or clone it.
}
});
Fiddle - http://jsfiddle.net/dmNhZ/