I have sortable elements in different sortable groups. I would like to use one element as a tool to add new elements. It should work this way: When a user drags this "add new" element to specific position there should be created new element and dragged one ("add new") should stay on it's previous position.
Do you have any idea if this is possible?
If my understanding is correct, this link may give you some idea of how to do it. Try the demo given on this page.
[link:- http://jqueryui.com/droppable/#revert]
// Here is the code copied from the same page. I have modified it a bit.
$(function() {
// Element which you will drag
$( "#draggable" ).draggable({ revert: "valid" });
// Element to which you will drag the above(draggable) element.
// On 'drop' event of this droppable you can add the element.
$( "#droppable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
/*Write code for adding new item in the sortable list here*/
}
});
});
Related
Ok, I haven't been able to work out the solution to this. I found this answer that helps reject drops if there is already a draggable element in the droppable slot, but I haven't been able to make that slot restart accepting children once it has been emptied. Also, it doesn't work for the initial state of the draggable pieces (notice you can stack more than one piece in a slot if it is the initial state of its child).
Here is the link to the project
And here is the specific piece of code:
jQuery(window).on("load",function() //if document has loaded
{
//Code to be executed when the document loads here
$( ".b-piece" ).draggable({ cursor: "move", revert: "invalid"});
$( ".grid-b .grid-slot" ).droppable({
accept: ".b-piece",
drop: function(event, ui) {
$(this).droppable('option', 'accept', 'none'); /* STOP ACCEPTING OBJECTS */
$(this).append(ui.draggable); /* MOVE DRAG OBJECT TO NEW PARENT */
$(this).children(".game-piece").css({"top":"0", "left":"0"}); /* MAKE GAME PIECE SNAP INTO PLACE */
},
out: function(event, ui){
accept: ".b-piece"
}
});
});
Thanks!
To reactivate droppable, you can simply modify the option on draggable start. This will cause a problem with revert, so you should also move the droppable disabling on stop event of draggable. Like this:
$( ".b-piece" ).draggable({
cursor: "move",
revert: "invalid"
start: function(e, ui){
ui.helper.parent().droppable('option','accept','.b-piece');
},
stop: function(e, ui){
ui.helper.parent().droppable('option','accept','none');
}
});
As for initial state, run this after setting the droppable, it should do the trick:
$( ".grid-b:not(:empty) .grid-slot:not(:empty)" ).droppable('option', 'accept', 'none');
I can't figure out how to prevent that draggable objects are added several times in one drag event. I made a small example where you can produce the problem.
https://jsfiddle.net/richiwarmen/afqu96v3/1/
$( ".draggableEl" ).droppable({
accept: ".dropme",
drop: function( event, ui ) {
$(this).append(ui.draggable.clone().css("left","0px"));
}});
$( ".draggableEl" ).draggable();
$( ".dropme" ).draggable({
revert: 'invalid',
helper: "clone" ,
});
drag the purple block in the upper left of the green block, .
You have multiple droppable sibling divs on top of each other. When you drop onto one of them, the ones below it will also activate.
If you made them nested you could use the greedy: true option. But in this case since your divs are all siblings, you can't really do much about it.
Demo - https://jsfiddle.net/Patosai/afqu96v3/2/
See here - Jquery droppable - Greedy not working as expected.
I think you just want to remove the word clone:
$( ".draggableEl" ).droppable({
accept: ".dropme",
drop: function( event, ui ) {
$(this).append(ui.draggable.css("left","0px"));
}});
$( ".draggableEl" ).draggable();
$( ".dropme" ).draggable({
revert: 'invalid',
});
I have a "draggable only" block where I have some images and another "sortable only" block where I can drop the items from the "draggable only".
What I want to do is when I drag the image into "sortable only" to append the larger version of the dragged image which is hosted on my server.
I think this can be relatively easy to do if there is a way to check when the item is dragged into the sortable list and then append the new image.
This is the actual JS :
$(document).ready(function () {
$(".sortableList").sortable({
revert: true,
/*update: function (event, ui) {
// Some code to prevent duplicates
}*/
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid'
});
});
Here is a jsfiddle with what I currently have:
(Hover over the "Headers" and there you should drag an image into "HOVER OVER HEADERS AND DROP IMAGES HERE" block)
I've looked trhrough the plugin API but I can't find a way to track when the item was dragged into the sortable area ?
Any suggesions on how can I do this ?
If I understand what you're shooting for, a receive function on your sortable list should work.
Working Example
$(".sortableList").sortable({
receive: function (event, ui) {
alert('It works');
}
});
The documentation says:
This event is triggered when an item from a connected sortable list
has been dropped into another list. The latter is the event target.
But apparently it will also fire when using a connected draggable.
I was looking the jQuery UI API and found this:
$( "#sortable li" ).droppable({
drop: function( ) {
//do the magic
}
});
I'm working with JQuery's draggable() and droppable() functions and am having issues trying to remove the currently selected DIV.
Every time I drag an object onto my #canvas, a new DIV is appended to the #canvas and the .newLetter class is added to it. My HTML looks something like below:
HTML:
<div id="canvas">
<div id="trash"></div>
<div class="newLetter"></div>
<div class="newLetter"></div>
<div class="newLetter"></div>
...
</div>
Once on the canvas, I want the option of then dragging the object into a "trashcan" and being removed. I ONLY want the currently selected DIV to be removed, but I can only get it to work if I remove all elements with the .newLetter class. Otherwise, nothing is removed, or the wrong elements are removed (such as the trashcan itself or the entire canvas).
This is my current JQuery:
// Delete Letters
$("#trash").droppable({
accept: '.newLetter',
drop: function(event, ui) {
$(".newLetter").remove();
}
});
I've tried doing all of the below but none of them are working:
$(this).remove();
$(".newLetter", this).remove();
$(this).sibling().remove();
$(this).parent().remove();
$(this).(".newLetter").remove();
$(this).closest().remove();
$(this).closest().sibling().remove();
I believe I have exhausted all possibilites. Any ideas??
In the drop event, you can refer the dragged element reference using ui.draggable
$("#trash").droppable({
accept: '.newLetter',
drop: function(event, ui) {
$(ui.draggable).remove();
//or even ui.draggable.remove(); since ui.draggable is a jQuery object
}
});
Please visit http://classrecon.com/invest/mockup.html for the example of my problem. To recreate the problem:
Drag PULM into the "Has these targets..." field and drop.
Delete the tag by hitting the X to the right of the tag.
PROBLEM: Notice that when you try to drag <delete element's text> the element won't drag.
How can I make the new tag draggable? And how can I transfer the deleted tag's text to the new tag?
JS:
$(function(){
$(".drag-key").draggable();
$(".tag-collection").droppable({
over: function(event, ui){
$(this).css("background-color","rgba(0,191,255,.3)");
},
out: function(event, ui){
$(this).css("background-color","white");
},
drop: function(event, ui){
$("<div class='key'></div>").text( ui.draggable.text() ).appendTo( this ).append(" <span class='remove'>✘</span>");
ui.draggable.remove();
}
});
// I THINK THE PROBLEM IS HERE
$(document).on('click', 'span.remove', function() {
$(".key-rep").append("<div class=\"drag-key key\"><removed element's text></div>");
$(this).closest('.key').hide();
});
});
you need to run the line $(".drag-key").draggable(); again at the end of $(document).on('click', 'span.remove', function() {
It should look like this
$(document).on('click', 'span.remove', function() {
$(".key-rep").append("<div class=\"drag-key key\"><removed element's text></div>");
$(this).closest('.key').hide();
$(".drag-key").draggable();
});
Here is a JSFiddle with the suggested fix
JSFiddle
When you .append() the markup for a new drag-key, it is just that.. a brand new element. It was not present at the time you created the selected $(".drag-key"), and made all elements matching that selector draggable. It doesn't contain the events or class associated with JQuery draggables. If you want to make your new drag-key draggable, you'll have to .draggable() the newly created element just like you did the original element(s).
You should use delegate() method to make divs draggable when appends to key-rep.