I have a function called saveSmilies which accepts two parameters: the dragged element id and the dropped element id.
I'm trying to do this like:
$('.draggable').draggable({
revert: true,
drop: function() {
$dropped = $(this);
},
stop: function() {
quiz1.saveSmilies($(this).attr('id'), $dropped);
}
});
But it doesn't work... Am I doing this completely wrong? Or just a typo somewhere?
So basically If I dragged an element with an id of 'box1' and dropped it on an element with an id of 'box2' then it would do the following: quiz1.saveSmilies('box1','box2');
This should work:
drop: function(ev, ui) {
var draggedID = ui.draggable.attr("id");
var droppedID = $(this).attr("id");
}
Related
I am trying to drag and drop elements to a div from another div through jQuery. I am adding the clone but not the actual element I have dragged to the droppable div.
I have then added the original element which I have dragged to the source div. Also, I have added the class "clone" to the clone element.
The problem is when I drag and drop the element in the droppable div(which is actually a clone), the element is copied and added to the droppable div but at the wrong position.
$("#drop").droppable({ accept: ".draggable",
drop: function(event, ui) {
var droppable = $(this);
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
console.log($(this).attr('class'));
if(!($(this).hasClass("clone"))) {
console.log("no clone");
$(dropped).detach().css({top: 0,left: 0}).appendTo("#origin");
var clone = dropped.clone().addClass("clone");
clone.appendTo(droppedOn);
}
},
I then found out that the "this" I was referring to is not updating correctly and I am very confused at this point.
I am a noob and I can't think of the solution.
Here is the pen:
https://codepen.io/ishankgupta95/pen/rZyOYb
The problem with your code is that your $(this) is pointing your div id="box" rather than the individual cloned div or images. so $(this) will never have a class named clone.
Here, solved it replace this in your code, Issue is fixed.
$("#drop").droppable({ accept: ".draggable",
drop: function(event, ui) {
var check = 0;
// $( "#test" ).droppable( "dragstart", function( event, ui ) {check = 1;} );
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
var droppable = $(this);
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
console.log($(this).attr('class'));
if(!elementMouseIsOver.classList.contains("clone")) {
console.log("no clone");
$(dropped).detach().css({top: 0,left: 0}).appendTo("#origin");
// dropped.clone().appendTo(droppedOn);
var clone = dropped.clone().addClass("clone");
clone[0].id = 'test';
clone.appendTo(droppedOn);
}
},
over: function(event, elem) {
$(this).addClass("over");
console.log("over");
},
out: function(event, elem) {
$(this).removeClass("over");
}
});
I have 2 divs: leftDiv and mainDiv. leftDiv contains some list elements which are draggable and droppable into mainDiv. I want to make these dropped items draggable inside the mainDiv as well, but after the first drag inside this div, items become non draggable. How can I fix this? Here is my jQuery code:
$('#output li').draggable({
helper: 'clone',
revert: 'invalid'
});
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
$(ui.helper).remove();
$(this).append(ui.draggable.draggable());
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
You can fix it like this:
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
//$(ui.helper).remove();
var draggedItem = ui.draggable.draggable();
$(this).append(draggedItem);
draggedItem.draggable();
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
Online Demo (fiddle)
So, I didn't knew how to start working on it so I planned to ask first here.
I want to create something where you would have a list of things and you could drop it to one container div. After dropping it there it would add for example name of item's id into url, so that users could share their things with another by sharing the link. Is it possible to do with jquery?
If yes, how? :C
#edit
this is what I have so far.
Dragin and dropping from one div to another
$(document).ready(function () {
$(".merchandiser_image").draggable({ cursor: "crosshair", revert: "invalid" });
$(".selected_item").droppable({
accept: ".merchandiser_image",
drop: function (event, ui) {
console.log("drop");
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn);
},
over: function (event, elem) {
console.log("over");
}
,
out: function (event, elem) {
}
});
$(".selected_item").sortable();
$(".klatka").droppable({
accept: ".merchandiser_image", drop: function (event, ui) {
console.log("drop");
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn);
}
});
});
It appears that you have everything set up for the drag and drop part. I have not tested it, but you might want to give this a try:
Part 1 - Update the ID list in the URL when items are moved around.
In both of your drop functions, you can call a function to update the URL:
drop: function (event, ui) {
// ...
updateURL();
},
Then, write this function:
function updateURL(){
// Get all selected items
var items = $('.selected_item .merchandiser_image'),
id_list = [];
// Gather their IDs into an Array
for(var i=0; i<items.length; i++){ id_list.push( items[i].id ); }
// Insert a hash in the URL, with the IDs, comma separated
window.location.hash = id_list.join(',');
}
Part 2 - Read the list in the URL on page load, and place the items in their correct spot.
Anywhere inside your $(document).ready(), call this function:
updateListFromURL();
And declare it:
function updateListFromURL(){
var hash = window.location.hash;
if(hash){
// replace `,` with `,#` to get a list of ID CSS selectors
var list_of_ids = hash.split(',').join(',#');
// Append them to your list of selected items
$(list_of_ids).appendTo(".selected_item");
}
}
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
I have jquery drag and drop working so I can move one row in a table to another.
the demo is here:
http://www.aussiehaulage.com.au/Default.aspx
I use jquery-ui-1.8.22 to make my table draggable/droppable.
My javascript is :
$(document).ready(function () {
$(".draggable").draggable({
helper: function () { return "<div class='ghost'></div>"; },
start: resizeGhost,
revert: 'invalid'
});
$(".droppable").droppable({
hoverClass: 'active',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
});
However when i move the row, if the mouse cursor is in between 2 rows on the droppable table both droppable rows are highlighted.. I need to make it so it will only highlight 1 droppable row at a time..
is this possible?
Add a new option in your droppable element, using either tolerance fit or intersect
$(".droppable").droppable({
hoverClass: 'active',
tolerence: 'intersect',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
And for your reference: jquery-ui