Glitchy behavior with JQuery Draggable (fiddle included) - javascript

I'm trying to use Jquery Draggable but I notice a flicker when the target item is lifted and then dropped, hovered over its old position, or brought out of its container. The image in the dragged div just disappears or appears in the wrong spot (it's supposed to always be displayed in the same position while dragging - as you'd expect).
Any idea how this can be corrected?
My code:
http://jsfiddle.net/PTSkR/28/
$(function () {
$('#container').isotope({
// options
itemSelector: '.study-box',
layoutMode: 'fitRows'
});
});
$(function () {
$(".study-box").draggable({
revert: "invalid",
helper: function () {
// We removeAttr('style') to get rid of the transform css that isotope added.
return $(this).clone().removeAttr('style').removeClass('isotope-item').addClass('drag-helper').appendTo('body');
},
start: function () {
$(this).hide();
},
stop: function () {
$(this).show();
},
zIndex: 100
});
});
$(function () {
$(".folder-box").draggable({ revert: "invalid" });
$(".folder-box").droppable({
// revert: "invalid",
accept: ".folder-box, .set-box",
drop: function (event, ui) {
var $this = $(this);
//ui.draggable.clone().removeAttr('style').removeClass('.folder-box').appendTo($this);
$('#container').isotope('remove', ui.draggable);
}
});
});

there is nothing wrong with the JavaScript, just remove all "position:fixed" from the CSS. It is messing the correct display off the background position.

Related

drag and drop get ids of multiple image in droppable

I'm new to jquery, there is no question on this, I wanted my submit button able to get ids of multiple images in droppable, anyone can help? please help me or guide me along... I need to get the ids of the image that is only dragged inside the droppable and when submit button is pressed.. Display the image that is only inside droppable..
jsFiddle
https://jsfiddle.net/xInfinityMing/azvvhxvL/
JavaScript
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
cursor: "move",
cursorAt: {
top: 56,
left: 56
},
drag: function(event, ui) {
ui.helper.removeClass("end-draggable");
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.addClass("end-draggable");
ui.helper.removeClass("draggable");
}
});
$("#briefcase-full").droppable({
greedy: true,
tolerance: 'touch',
drop: function(event, ui) {
var id = ui.draggable.attr("id");
alert(id);
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});
Basically, all the dragged element will go inside the droppable. so you can use children to check every elements.
$("#briefcase-droppable").children(".icons").each(function() {
var icon_id= $(this).attr("id");
});
JSFiddle : Link
I suggest you to use class instead of using img element to attach draggable event.

Making dragged and dropped element droppable while still being draggable

I have been trying to achive functionality as follows:
-you can drag and drop multiple 450x150 onto .drop_cont
-then you can drag and drop 300x150 onto 450x150
I tried adding and removing classes but it doesn't seem to work.
Is there any way to do that, probably there is some way that I didn't think of.
Demo:
jsFiddle
Sample Code:
$(document).ready(function () {
$( ".idg_row" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".idg_column" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".drop_cont" ).droppable({
accept: ".idg_row",
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
$( ".droppableC" ).droppable();
});
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
}
Once you add the class, you need to recall droppable to run on the new elements.
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
$('.droppableC:not(.ui-droppable)' ).droppable();
}

How to make draggable element invisible while it reverting?

I have dragable element in my html. and jQuery is like this
$( ".block-33a" ).sortable({
revert: true
});
$( ".hidden_drag" ).draggable({
revert: true,
stop: function(event,ui){
//some code
}
});
by using this u can able to get my element back to the default place but it should be invincible while it is reverting. how do i do it?
UPDATE
this is my fiddle http://jsfiddle.net/Q2h2w/46/
and it will say my requirement too
I have updated the fiddle. Please have a look at it.
I have added the mouseup event to detect mouse release. Hope that will solve your purpose:
http://jsfiddle.net/Q2h2w/56/
var count=0;
$('.button_area').draggable({
revert: true,
drag: function(){
count++;
},
stop: function(event,ui){
$('.button_area').off("mouseup");
$(this).show();
},
start: function( event, ui ) {
$('.button_area').on("mouseup",function(){
$(this).hide();
});
}
});

jQuery getting id of the element which is sortable

I got some div's which are sortable etc.. But they got all the same classes, so if I drag one, all the contents of the div's are hiding. I want to get 'id' of the div i'm dragging, and put it into hide and show function.
It should be like this..
jQuery code:
$("#column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
.click(function() { // I know it is wrong but it should be like this
var id = $(this).attr('id')
}
$('id').hide();
},
stop: function() {
.click(function() { // same
var id = $(this).attr('id')
}
$('id').show();
}
});
EDIT: Example my problem: fiddle
Please let me know if this is something you were looking for:
JavaScript Code
$("#column-left, #column-middle, #column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
$(this).find('.contents').hide();
},
stop: function() {
$(this).find('.contents').show();
}
});
$(".sort").disableSelection();
In general, $(this).find('.contents') will be exactly the child element (content) which you are dragging.
Also, I have merged your 3 identical methods into 1 avoiding duplicates and any mess in the code.

Constrain draggable element after it has been dropped

Basically what I have is a set of doodads, and what I need to do is to be able to drag any item in that set into a containment box. Once they are in the box, they can still be moved around and manipulated freely, but they can't be taken out of the box again though they can be deleted.
The doodads are also set to clone as a user can have more than one of the item in the box if they so desire.
So the two parts are, set up the doodad list (already done), and then make it draggable so that it can be dragged into the droppable div box. Then the second part is that once it's in the div box, it must be draggable again, not clonable, and also contained in the box.
Here's my JS code:
$(document).ready(function() {
function MakeDraggable(item) {
item.draggable({
revert : "invalid"
});
}
$(".doodad").draggable({
helper : 'clone',
scroll : true
});
$(".dropped").draggable ({
containment: ".box"
});
$(".box").droppable({
accept : ".doodad",
activeClass : "ui-state-default",
hoverClass : "ui-state-hover",
drop : function(event, ui) {
var droppedItem = $(ui.draggable).clone();
//droppedItem.class = ".dropped";
droppedItem.draggable();
//ui.draggable.draggable('option', 'revert', false);
//droppedItem.draggable();
$(this).append(droppedItem);
}
});
});
I've tried many things. I tried changing the element's ID to something else so that it can take on that class' draggable attributes. I've also tried programming it within the drop function, but I'm having issues.
I have no idea how to refer to the draggable element just dropped in order to manipulate it. I was told it was $(ui.draggable), or $(ui.draggable).clone(), but when I try referring to that and calling draggable on it with my desired options, it doesn't work. The best I've gotten was that it was draggable after dropping, but it kept duplicating itself and was not contained within the box.
Any help would be greatly appreciated, and I am new to all of this stuff. I did look at the JQuery API but it didn't help me much in this regard.
Edit:
My Html is:
<body>
<img src="doodads/i1.gif" class="doodad">
<img src="doodads/i2.gif" class="doodad">
<img src="doodads/i3.gif" class="doodad">
<img src="doodads/i4.gif" class="doodad">
<div class="box" />
</body>
CSS is:
.box {
width:500px;
height:500px;
background: orange;
}
You can set a class on the dropped element e.g. copied and than check if the dropped element have already that class and if so stop the cloning.
To constrain the movement inside the box you can use containment option of draggable:
Constrains dragging to within the bounds of the specified element or
region.
Code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied');
droppedItem.draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/ufHMm/
EDIT
To get the dropped element position we had to calculate and use it, using:
$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left
we get the helper position along its container.
Final code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/ufHMm/3/

Categories