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.
Related
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*/
}
});
});
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
}
});
I have a draggable element that I am creating a clone of and dragging to a drop zone. I want the draggable element to be re-draggable once it is set down in the drop zone correctly.
The odd behavior comes into play when I encapsulate the draggable div within another div. When it is encapsulated, it will not set the clone element to draggable, so I cannot re-drag the element. However, if in the jFiddle, you remove the divs from surrounding the draggable div, the thing works fine.
Working:
<div id="draggable"></div>
Not Working:
<div><div id="draggable"></div></div>
I need to know why the encapsulation is fooling around with this. It seems like it would be difficult to build a meaningful thing with a problem like this because I want to have a sidebar containing multiple draggables similar to these. Since building a sidebar requires encapsulating all these draggable elements within another div, you can see the conundrum I've happened upon.
The jFiddle links below contain the Jquery, and such.
Here is the jFiddle that doesn't work rightly: here.
And, here is the jFiddle that works correctly: here.
The only difference in the one that doesn't work: the dome class div is encapsulated by another div.
You need to remove the draggable on blah and add the draggable to the clone that is appended in the stop block.
Try this:
$(function() {
var i=1;
var indexP;
var blah
$(".dome").draggable({
revert: 'invalid',
helper: 'clone',
start: function(event, ui) {
var newId = i;
$(ui.helper).attr("id",newId);
indexP = $(ui.helper).attr('id');
blah = "#" + indexP;
},
stop: function(event, ui) {
$(ui.helper).append("<br><span>"+blah+"</span>");
$(ui.helper).clone().appendTo('#cont').draggable();
i++;
},
});
$("#cont").droppable({
});
});
function updateStatus (x,y,i) {
var xPos = "#x" + i;
var yPos = "#y" + i;
$(xPos).text(x);
$(yPos).text(y);
}
I'm using jQuery UI to perform some drag and drops. I'm trying to find out what droppable a draggable is in.
Can anyone help? Here's my code.
$(".draggable").draggable({
stop: function(event, ui){
console.log(event);
// I need the element which this draggable is correct in.
}
});
I think #Patricia has it slightly the wrong way round. Ive forked their jsfiddle here but the essence is in getting the id of the item dropped into
$('.droppable').droppable({
drop: function( event, ui ) {
alert($(this).attr("id"));
}
});
i think you'll need to catch that in the droppables drop callback.
$('#draggable').draggable();
$('#droppable').droppable({
drop: function( event, ui ) {
alert($(this).attr("id"));
}
});
here's a look at this fiddle to play around with it:
http://jsfiddle.net/2vsC4/
edit: oops, that's the id of the dragged element! you want where it landed! which is easy! I've edited the script here in the answer to show that.
take a look at the draggable and droppable documentation for more info about how they work:
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
I have a draggable object, with that can be accepted in several droppables.. I have put all the droppables in a container, and simply want to be able to detect when the draggable is hovering over the container of droppables...
At first, I tried making use of the 'over' and 'out' callbacks for droppables, but it was not working because hovering from one droppable to another (inside the same container) was causing it to think the mouse had left the container...
So my next approach was to in the drag start callback, do an event listener for mouseenter and mouseleave on the container-- and then stop listening on the drag stop callback...
However, this results in total crazy behavior... If you look at my example page:
http://collinatorstudios.com/www/jquery_draggable_test.html
When dragging the box to the red dropzone, you should see "enter" when the mouseenter event fires, and "leave" when mouseleave happens.. However, just dragging the box over the inside of the container causes "leave" to appear a zillion times..... I cannot figure out why this is happening, nor what solution there is to my problem so I can do what I need to. I've been working on this for almost 4 hours now and am losing my mind over what seems like it should be so simple to achieve.
Any help would be greatly appreciated... Thanks.
Try adding a droppable for the container:
$('#drop_zone_container').droppable({
over: function(){ feedback.text('enter')},
out: function(){feedback.text('leave')}
});
You only need to bind to the events once! There is no need to bind and unbind them each time... I separated them out in the code below to make it more clear about binding once.
And as ZDYN said (+1 to him), you need to include a droppable code, but instead of using the container, use the zones inside... here is a demo and the full code below.
var feedback = $('#feedback');
$('.item').draggable({
revert: true,
zIndex: 999,
cursor: 'move'
});
$('.drop_zone').droppable({
drop: function(event, ui) {
ui.draggable.appendTo($(this));
}
}).bind('dropover dropout', function(e) {
var id = this.id;
feedback.text(e.type === 'dropover' ? 'Over: ' + id : 'Out: ' + id);
});