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
}
});
Related
So once I append a new list of elements they are no longer sortable. I've tried to use sortable("refresh") but it still doesnt work.
$(function() {
$(".test").on('click', function(event) {
$(this).parent().append('<ul class="sortList"><li>123</li></ul>');
$(".sortList").sortable('refresh');
})
$(".sortList").sortable({
connectWith: ".sortList"
}).disableSelection();
});
Here is a jsfiddle http://jsfiddle.net/6nL0rm1a/5/ showing my problem. As you see if you click the button a new list is added. But you cant sort/drag & drop its items to other lists.
I want the items of the appended list to be draggable & droppable. Also sortable.
First attempt, adding the sorted when appending the list.
$(function() {
$(".test").on('click', function(event)
{
$(this).parent().append('<ul class="sortList"><li>123</li></ul>').children().sortable({
connectWith: ".sortList"
}).disableSelection();
})
$(".sortList").sortable({
connectWith: ".sortList"
}).disableSelection();
});
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 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*/
}
});
});
Basically, I have .dragme (object being dragged), .dropzone1 (place to be dropped at) and an image I want .dragme to become once it has been dropped.
So far I have this
$(".dropzone1").droppable({
accept:".dragme",
drop: function() {
alert("DROPPED");
}
});
So, that code works, once .dragme has been dropped in place I get the alert. But I've tried using .attr to change the image source of .dragme in place of where the alert is currently (the alert also works if I put it into the below code, but the image still doesn't change):
$(".dropzone1").droppable({
accept:".dragme",
drop: function() {
$(".dragme").attr("src", "../imgs/newimage.png");
}
});
I've looked through other answers to similar questions, but none of the solutions worked, any help is greatly appreciated.
This is a little jsfiddle but i can't get my images onto it, they're only 30x30 png's anyway. I made it so that the alert is working so if anyone can have a play and get it so that the red block changes colour or into an image when it lands on the blue, that'd be great!
Try this:
demo
$(".dragme").draggable();
$(".dropzone1").droppable({
accept:".dragme",
drop: function( event, ui ) {
$(".dragme").attr("src", "../imgs/newimage.png");
alert($(".dragme").attr('src'));
}
});
2nd Solution
DEMO
$(".dragme").draggable();
$(".dropzone1").droppable({
accept:".dragme",
drop: function( event, ui ) {
$(ui.draggable).attr("src", "../imgs/newimage.png");
}
});
From the drop event documentation:
This event is triggered when an accepted draggable is dropped 'over' (within the
tolerance of) this droppable. In the callback, $(this) represents the droppable
the draggable is dropped on. ui.draggable represents the draggable.
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.