I am trying to copy drop element in div , but the problem is when i dropped element and change image src of already present attribute , drag element remaining same still drag-able.
Fiddle
js code snippts ::
$('.piece').draggable({
revert: 'invalid',
start: function (event, ui) {
// alert('drag start');
var td_height = $('td').height();
var draggedID = $(this).width(td_width).height(td_height);
}
});
$("td").droppable({
accept: ".piece",
drop: handleDrop
});
function handleDrop(event, ui) {
alert('hello' + $(this).attr("id"));
var drop_src = ui.draggable.attr("src");
$(this).addClass("ui-state-highlight");
//$( this ).find( "img" ).attr("src",drop_src);
$(this).append(ui.draggable.clone().removeClass().addClass('new_piece'));
ui.draggable.draggable('option', 'revert', false);
}
});
Scenario 1:
If we continue from where you left your JSFiddle, there are a number of problems, each of which may have better solutions than shown, but here goes:
http://fiddle.jshell.net/Z9HDP/1
You are dropping onto a TD that already contains an image, but you are not removing the existing image before appending a new one. I assumed you did not want them lining up side-by-side, so have made it remove the existing content of the TD first.
You are cloning the dragged object, which includes its relative offset of the dragging, but are not removing the top and left style values. This means your clone is above and to the right of the table (usually off-the-grid in the Fiddle, so not visible). I am removing the top and left offsets.
You are not resetting the position of the original dragged item, which leaves it where you dropped it. I assumed you wanted it back in the palette and there may be a better way, but I just reset the top & left to 0.
function handleDrop(event, ui) {
//alert('drop ' + $(this).attr("id"));
var drop_src = ui.draggable.attr("src");
//alert(drop_src);
$(this).addClass("ui-state-highlight");
//$( this ).find( "img" ).attr("src",drop_src);
$(this).empty().append(ui.draggable.clone().removeClass().addClass('new_piece').css("left", "").css("top", ""));
// Reset position of dragged item
ui.draggable.css({
top: "",
left: ""
});
ui.draggable.draggable('option', 'revert', false);
}
Scenario 2:
If you want to go with your original comment, of changing the target source, this appears to work. I am guessing you were just missing the position reset of the dragged item:
http://fiddle.jshell.net/Z9HDP/3/
function handleDrop(event, ui) {
//alert('drop ' + $(this).attr("id"));
var drop_src = ui.draggable.attr("src");
$(this).addClass("ui-state-highlight");
$(this).find("img").attr("src", drop_src);
// Reset position of dragged item
ui.draggable.css({
top: "",
left: ""
});
ui.draggable.draggable('option', 'revert', false);
}
Related
EDIT: JSFIDDLE: http://jsfiddle.net/h9yzsqfr/
--
Code:
elem.editor.find("div.ui-widget").draggable(
{
handle:"div.content",
containment:elem.editor,
snap:"*",
start: function(e,ui)
{
$(ui.helper).addClass("dragging");
},
drag: function(e,ui)
{
checkTop(ui);
if($(ui.helper).parents("div.lo-content").length > 0)
{
$(ui.helper).appendTo(elem.editor);
ui.position = { 'top': e.pageY, 'left': e.pageX };
}
},
stop: function(e,ui)
{
oldWidget.saveState($(ui.helper),1);
setTimeout(function() {
$(ui.helper).removeClass("dragging");
}, 300);
}
});
I have some draggable objects within a container defined by elem.editor; however I have some other draggable objects inside div.lo-content which is also inside elem.editor.
Whenever an object inside div.lo-content is dragged, it should reattach to the elem.editor container which is working fine; however as demonstrated in the following GIF (below), it is not setting the position of the draggable object to where the mouse cursor is.
What is a workaround for this problem?
The problem is your width: 100% and the containment option. As soon as its appended to body it stays 100%, but of the body, then it gets smaller but the containment has already been calculated.
One way to solve it is to reset containment. There are probably different ways to do it, one way could be like this:
start: function (e, ui) {
if ($(this).parents(".inner").length > 0) {
$(ui.helper).addClass("dragging");
ui.helper.css({
'width': '100px',
'left': '0px',
'top': '0px'
});
ui.helper.data()['ui-draggable'].containment = [0,0,$('body').width(), $('body').height()]
ui.helper.appendTo("body");
}
},
http://jsfiddle.net/puurqx8r/6/
connectToSortable
It's a Selector that Allows the draggable to be dropped onto the specified sortables. If this option is used, a draggable can be dropped onto a sortable list and then becomes part of it. Note: The helper option must be set to "clone" in order to work flawlessly. Requires the jQuery UI Sortable plugin to be included.
Code examples:
Initialize the draggable with the connectToSortableoption specified:
$( ".selector" ).draggable({
connectToSortable: "#my-sortable"
cursorAt:{top: 5, left: t}
});
Use cursorAt: top:, left: and appendTo: 'body'
See my answer with example here.
jQuery draggable shows helper in wrong place after page scrolled
I had the same problem. This is caused by the use of margins to center elements. Try using position absolute!
I removed position:absolute on dragable object
There are some div elements on my page. A user can drag any of them many times. After every dragging, I need to get new coordinates of the div that was dragged.
My code works good with div[0]: I actually get new coordinates after every new dragging.
The problem is with all the other divs, like div[1], div[2], div[10]... Script gets coordinates after the first dragging, but all the next times coordinates are still the same. They don't change.
I tried to clear variables, but that didn't help.
What could be this problem caused by? What should I check to find the solution?
I use jQuery and jQuery UI. Code:
$(document).ready(function(){
$(".rD").draggable({
stop: function(event, ui) {
// get the index of the dragged element
id = $(this).index();
// get coordinates of the dragged element
rect = document.getElementsByTagName("div")[id].getBoundingClientRect();
alert("top:" + rect.top + ", left: " + rect.left);
// clearing variables didn't help to solve the problem
delete rect;
delete id;
}
});
Try to:
alert(ui.position.top, ui.position.left)
Documentation
Whole code:
$(document).ready(function(){
$(".rD").draggable({
stop: function(event, ui) {
// Use var keyword for your local variables
// var rect = ui.helper[0].getBoundingClientRect();
alert("top:" + ui.position.top + ", left: " + ui.position.left);
}
});
});
Sorry for the confusing title, I hope I can explain.
http://thetally.efinancialnews.com/tallyassets/suebanks/suebanks.html
In this example you can drag a red box from the right into the grey box at the top left, each red box has a unique ID. When this red box is dropped in, I would like all the black boxes below to disappear EXCEPT the ones who's CLASS matches the unique ID of the red square.
The first box has an ID of 'barclays', as do 2 of the black boxes, so those 2 should remain
The second has an ID of lloyds, so only 1 of those black boxes should remain.
Here is the javascript code I am using:
$(init);
function init() {
$('.draggable').draggable({
containment: '#maincontain',
stack: '.bankbox div',
cursor: 'move',
revert: true
});
$('.judge').droppable({
drop: handleDropEvent
});
}
function handleDropEvent(event, ui) {
var draggable = ui.draggable;
ui.draggable.position({
of: $(this),
my: 'center bottom',
at: 'center bottom'
});
alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');
}
...so what I need to do is get the 'draggable.attr('id') as is displayed in the alert, then create something in the handleDropEvent that says... HIDE all divs in .lawyers div, except those with a class equal to draggable.attr('id')
I've tried hacking it together but not getting the result I'm after
Hope it isnt too confusing, thanks for any advice
untested but your handleDropEvent should look similar to this...
function handleDropEvent(event, ui) {
var draggable = ui.draggable;
ui.draggable.position({
of: $(this),
my: 'center bottom',
at: 'center bottom'
});
alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');
//Add these lines:
var lawyers = $('.lawyers .lawyer');
lawyers.not('.'+draggable.attr('id')).hide();
lawyers.filter('.'+draggable.attr('id')).show();
}
here is a working fiddle:
http://jsfiddle.net/g30rg3/c3Dt9/1/
Check this page:
http://api.jqueryui.com/droppable/#event-drop
Hmm - i usually have the droppable area named droppable ...
Think it will be something like this:
$( ".droppable" ).droppable({
drop: function( event, ui )
{
$( ".blackBox" ).addClass('hideBox');
}
});
Then use the hideBox class that has now appended itself to blackBox to hide??
Check the info in that link though i think it might be what you need. Or pop it into codepen so people can play :)
You just have to add
$('.lawyers').not('.' + draggable.attr('id')).hide();
after the ui.draggable.position command.
I am having an unusual issue with droppable. I have a lot of code so I will try to simplify my question as best as possible.
I have two divs that are droppable within a container (which is the size of the window).
div1 is 5000px by 5000px and is centered on the page (AKA there are offset positions of large numbers). div2 is absolutely positioned within the container on top of the first div. It's width is 100% of the container and height is about 50px.
I also have loads of drag and drop items that need to move from one div to the other, and back again.
The problem is, once I move an item from div2 into div1, they will not move back to div 2 again. they simply go underneath the div and remain in div1. I would love to post code, but there is so much I am not sure it would help.
I am currently using greedy:true on each drag and drop div.
Any ideas? Thanks in advance.
EDIT
This is the jquery for div2
$("#bs-quickAdd-que").droppable({
accept: ".bs-items",
drop: function( e, ui ){
var $this = ui.draggable; // the element being dragged
$this.addClass("bs-que-items item-in-que");
$("#bs-quickAdd-que").css({"background-color": "transparent"});
},
over: function( e, ui ){ // when drag of the que box
var $this = ui.draggable; // the elementbeing dragged
$this.appendTo("#bs-quickAdd-que").removeClass("item-in-grid");
$("#bs-quickAdd-que").css({"background-color": "#fff"});
},
out: function( e, ui ){
var $this = ui.draggable; // the element being dragged
$this.appendTo(elem).addClass("item-in-grid").removeClass("bs-que-items");
$("#bs-quickAdd-que").css({"background-color": "transparent"});
},
greedy: true
});
This is the jquery for div1
elem.droppable({
accept: ".bs-items",
greedy: true
});
Here is the items draggable
$(".bs-items").draggable({
containment: "window",
grid: [10,10],
stack: ".bs-items",
cursorAt: {top: 15, left: 10},
drag: function(e,ui){
var $this = ui.helper, $parent = $this.parent(); // the element being dragged
if($parent.is("#grid")){
thisx = Math.round(e.pageX - elem.offset().left);
thisy = Math.round(e.pageY - elem.offset().top);
}else{
thisx = Math.round(e.pageX - $("#bs-quickAdd-que").offset().left);
thisy = Math.round(e.pageY - $("#bs-quickAdd-que").offset().top);
}
ui.position.left = thisx-($this.width()/2);
ui.position.top = thisy-($this.height()/2);
}
});
Here's the thing.
jQuery UI prevents a ancestor droppables from receiving drop events when a descendent droppable is configured with {greedy: true}. It does not prevent sibling or cousin droppables from receiving drop events in cases where one overlaps the other.
This is a design decision by jQuery UI. They do not intend to fix it.
I am using Jquery ui and it provide a function for me to make draggable content. It has an option 'containment' that force the draggable item move within the box.
However, for my case, the content (image) must exceed the screen , how can I force it not to drag inside the screen?
Thanks
$("#popup").draggable({
addClasses:true,
scrollSpeed: "200",
containment: "parent",
//appendTo: "body",
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
var p = ui.helper.position();
$(this).stop().animate({
top: p.top,
left: p.left
},1000,'easeOutCirc');
}
});