I am adding the draggable functionality to an element on a particular user event(hold event). Drag functionality is not working the first time.
Hammer(element).on("hold",function(event){
console.log("hold");
$(element).draggable({
helper: "clone",
cursorAt: { left: 5, top: -5 },
cursor: "move",
stop: function() {
$(element).draggable("destroy");
}
});
});
In the above code snippet, the hold event triggers the draggable functionality but it only works when I release the hold and try it the next time. How can make the drag initiate on hold itself rather than the next time?
EDIT:
Added a sample code in jsbin.
How about using a delay on the draggable instead of the hold Hammer event?
$(element).draggable({
helper: "clone",
cursorAt: { left: 5, top: -5 },
cursor: "move",
stop: function() {
$(element).draggable("destroy");
},
start: function() {
console.log("start");
},
delay:300
});
This works for me:
$('.pic').draggable({
revert: 'invalid',
start: function(event, ui) {
},
stop: function(event, ui) {
$(this).removeClass('dragging');
}
});
$('body').hammer().on('hold', '.container li', function() {
$('.pic', this).addClass('dragging');
});
$('body').hammer().on('dragstart', '.container li .pic', function(e) {
if (!$(this).hasClass('dragging')) {
e.preventDefault();
}
});
Related
we trying to integrate multiple drggable and droppable. we are using sortable for ease of clone functionality in this scenario. draggable once dropped need to be draggable again.
how do we limit sortable to receive only one element and revert to original if more than one dropped onto it.
look like out and over functions of sortable are misbehaving in that case.
commented line code is for disabling dropping second element on sortable. which is not working as expected.
Two issues when you enable my commented code:
draggable clone not reverting to original place after moving out of droppable.
draggable element moved from one droppable to another reverting to draggable's original place.
For a demonstration, see this jsfiddle
script:
// jQuery.noConflict();
jQuery( document ).ready(function() { init();});
function init() {
var mouse_button = false;
jQuery('.ui-draggable').live({
mousedown: function () {
mouse_button = true;
},
mouseup: function () {
if (jQuery(this).attr('data-pos') == 'out' && jQuery(this).attr('data-id')) {
var p = jQuery('#' + jQuery(this).attr('data-id'));
var offset = p.offset();
jQuery(this).hide();
jQuery(this).animate({ left: offset.left, top: offset.top, width: jQuery(this).width, height: jQuery(this).height }, 100, function () {
jQuery(this).remove();
$( ".ui-droppable" ).each(function() {
if($(this).children().length == 0) {
$( this ).removeClass("dontDrop");
}
});
//if(p[0].hasAttribute("draggable"))
p.draggable("enable");
// $('.ui-droppable').sortable('option', 'connectWith',$('.ui-droppable').not('.dontDrop'));
// $('.ui-draggable').draggable('option', 'connectToSortable',$('.ui-droppable').not('.dontDrop'));
});
}
mouse_button = false;
},
mouseout: function () {
if (mouse_button) {
mouse_button = false;
}
}
});
jQuery( '.ui-draggable' ).draggable( {
cursor: 'move',
helper: 'clone',
connectToSortable: ".ui-droppable",
revert: function (event, ui) {
}
} );
jQuery(".ui-droppable").sortable({
cursor: "move",
connectWith: ".ui-droppable",
receive: function (event, ui) {
if($(this).children().length >= 1) {
$(this).children().addClass('filled');
$(this).addClass('dontDrop');
$( ".ui-droppable" ).each(function() {
if($(this).children().length == 0) {
$( this ).removeClass("dontDrop");
}
});
// $('.ui-droppable').sortable('option', 'connectWith',$('.ui-droppable').not('.dontDrop'));
// $('.ui-draggable').draggable('option', 'connectToSortable',$('.ui-droppable').not('.dontDrop'));
}else {
$(this).children().removeClass('filled');
}
if (jQuery(this).data().sortable.currentItem) {
jQuery(this).data().sortable.currentItem.attr('data-id', jQuery(ui.item).attr("id"));
// if(jQuery(ui.item)[0].hasAttribute("draggable"))
jQuery(ui.item).draggable("disable");
}
},
out: function (event, ui) { if (ui.helper) { ui.helper.attr('data-pos', 'out'); } },
over: function (event, ui) { ui.helper.attr('data-pos', 'in'); }
});
}
Here's a working example: click here
You can user Jquery's draggable and droppable interactions to achieve what you want. Check the working example.
$(document).ready(function () {
$(".ui-draggable").draggable(draggable_options) //make cards draggable
$(".ui-droppable").droppable({ //handle card drops
greedy: true,
drop: function (event, ui) {
handleDrop(this, event, ui)
},
accept: function () {
return checkIfShouldAcceptTheDraggable(this)
}
})
})
You can do it like this:(Online Demo (fiddle))
var draggable_options = {
helper: 'clone',
cursor: 'move',
revert: 'invalid',
};
$(".ui-draggable").draggable(draggable_options);
$(".ui-droppable").droppable({
drop: function(event, ui) {
var $item = ui.draggable;
$item.draggable(draggable_options)
$item.attr('style', '')
$(this).append($item)
},
accept: function() {
return $(this).find("li").length === 0 // Your condition
}
});
$(".textToImageRightPanel").droppable({
drop: function(event, ui) {
var $item = ui.draggable;
$item.draggable(draggable_options);
$item.attr('style', '');
// Return to older place in list
returnToOlderPlace($item);
}
});
// Return item by drop in older div by data-tabidx
function returnToOlderPlace($item) {
var indexItem = $item.attr('data-tabidx');
var itemList = $(".textToImageRightPanel").find('li').filter(function() {
return $(this).attr('data-tabidx') < indexItem
});
if (itemList.length === 0)
$("#cardPile").find('ul').prepend($item);
else
itemList.last().after($item);
}
Determining when to revert may be best done in .draggable() using revert: function(){}.
Function: A function to determine whether the element should revert to its start position. The function must return true to revert the element.
You can do this:
jQuery('.ui-draggable').draggable({
cursor: 'move',
helper: 'clone',
connectToSortable: ".ui-droppable",
revert: function(item) {
if (!item) {
return true;
} else {
if (item.hasClass("dontDrop")) {
return true;
}
}
return false;
}
});
the revert function is passed false if the draggable item is not accepted. For example, if it is dropped on something that is not a target. If the draggable item is accepted, a jQuery Object is passed back.
See more: jQueryUI sortable,draggable revert event
The logic is a little confusing. If what is passed back is false, we return true to revert letting draggable revert the item to it's position. If what is passed back is not false, then it's an object we can test. If the target is "full", we revert. Otherwise we do not revert.
Sortable still wants add the item for some reason. May need to adjust to update and clear out any items that are not class "filled".
Fiddle: https://jsfiddle.net/Twisty/7mmburcx/32/
Hello wizards of the internet,
I want to show a hidden element from a cloned object when it is is dropped into a certain container, called "plug1". But what it does right now is it shows the hidden element on the main object and not on the cloned object. It's also not supposed to jump back to its original position. See this gif for an example.
I believe it has something to do with the sym.getSymbol("cup1").$("hold1").show(); line, but I can't put my finger on it.
Does anyone have an idea as to how I can fix this?
Script:
sym.$(function () {
sym.$("cup1").draggable({
helper: "clone",
cursor: 'move'
});
sym.$("Stage").droppable({
drop: function (event, ui) {
var $canvas = $(this);
if (!ui.draggable.hasClass('canvas-element')) {
var $canvasElement = ui.draggable.clone();
$canvasElement.addClass('canvas-element');
$canvasElement.draggable({
containment: 'Stage'
});
$canvas.append($canvasElement);
$canvasElement.css({
left: (ui.position.left),
top: (ui.position.top),
position: 'absolute'
});
sym.$("cup1").hide().clone().appendTo('Stage');
}
}
});
//hold
sym.$("plug1").droppable({
greedy: 'true',
accept: function() { return true; },
drop: function (event, ui) { tolerance: 'fit', sym.getSymbol("cup1").$("hold1").show(); }
});
});
I'm currently doing a Web App that can drag and drop image with resize.
But when I append the cloned element on the #dropzone, I can't select it anymore.
So here's my code:
$(document).ready(function() {
$(".draggable").draggable({
helper: 'clone',
cursor: 'move'
});
$("#dropzone").droppable({
drop: function (event, ui) {
var canvas = $(this);
if (!ui.draggable.hasClass('object')) {
var canvasElement = ui.helper.clone();
canvasElement.addClass('object');
canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging')
canvas.append(canvasElement);
canvasElement.draggable({
containment: '#garden',
stack: canvasElement
}).find("img").css({
'width': 50,
'height': 50
}).resizable({
minWidth: 50,
minHeight: 50,
containment:'#garden'
});
canvasElement.css({
left: (ui.position.left),
top: (ui.position.top),
position: 'absolute',
zIndex: 3
});
}
}
});
$(".object").click(function(event, ui) {
alert("WOOOOO!");
$(this).hide();
});
});
my click function on .object isn't working. I dont know why. Please help.
If you want to be able to keep dragging the cloned element, you should add the following code to your #dropzone drop function:
canvasElement.draggable({
cursor: 'move'
});
This is because when $(".draggable").draggable was executed your new canvasElement didn't exist yet and that's also why your click event doesn't work, so also add the following to your #dropzone drop function:
canvasElement.click(function(event, ui) {
alert("WOOOOO!");
});
If you want to do something when you drop out of the dropzone check out this thread: jQuery draggable, event when dropped outside of parent div
(check http://codepen.io/ptcardoso/pen/xErxJm)
I'm trying to drag the boxes from the man to the top of the car, target div called 'droppable'. This seems to work when previewing from Dreamweaver but not when previewing in jsfiddle:
http://jsfiddle.net/dantest2014/9JTSQ/7/
$(function () {
var dfd1 = $.Deferred();
var dfd2 = $.Deferred();
$("#lft_box_layer").draggable({
revert: "invalid",
cursor: "move"
});
$("#rgt_box_layer").draggable({
revert: "invalid",
cursor: "move"
});
$("#btm_box_layer").draggable({
revert: "invalid",
cursor: "move"
});
$("#droppable").droppable({
accept: "#lft_box_layer, #rgt_box_layer, #btm_box_layer",
// tolerance can be set to 'fit', 'intersect', 'pointer', or 'touch'
tolerance: 'intersect',
// Add .hoverClass whenever #draggable is being hovered over #droppable
over: function (event, ui) {
$('.ui-draggable-dragging').addClass('hover');
},
// Remove .hoverClass whenever #draggable is no longer hovered over #droppable
out: function (event, ui) {
$('.ui-draggable-dragging').removeClass('hover');
},
// Add .dropClass whenever #draggable is dropped on #droppable
drop: function (event, ui) {
$('.ui-draggable-dragging').removeClass('hover').addClass('drop');
$('.ui-draggable-dragging').draggable('option', 'disabled', true);
$("#car").attr('src', "images/removals-car-break.jpg");
}
});
});
Can someone help me with this?
After the three boxes have been dragged to the top of the car I would like to trigger a change of car image and also change the text.
Any help with any part of this question would be great.
Thanks!
Dan
In order to preview it on JSFiddle you first need to implement jQueryUI (not just jQuery) on the project.
Here is the same example with jQueryUI bound into your project (and cleaned the code a little to not waste code calling the draggable for all of the elements): http://jsfiddle.net/9JTSQ/11/
$(".toDrag").draggable({
revert: "invalid",
cursor: "move"
});
$("#droppable").droppable({
accept: ".toDrag",
.....................
});
I just bound jQueryUI from its CDN in "external resources"
im trying to develop a game using jquery drag and drop and need help on it. The problem i am facing is that there are 4 drop location and about 25 dragable elements. Each drop location can have only one draggable element and if i try to drop another element the location should be swapped and previously dropped element will get the initial location of newly dragged element.
$(".drag").draggable({
containment: ".dropable",
revert: "invalid",
appendTo: '.dropable',
start: function (evt, ui) {
if (!ui.helper.data("originalPosition")) {
ui.helper.data("originalPosition", ui.originalPosition)
}
}
});
$(".debit_option").droppable({
greedy: true,
accept: '.drag',
over: function () {
$(this).removeClass('out').addClass('hoverClass')
},
out: function () {
$(this).removeClass('hoverClass').addClass('out')
},
drop: function (event, ui) {}
});
$(".credit_option").droppable({
over: function () {
$(this).removeClass('out').addClass('hoverClass')
},
out: function () {
$(this).removeClass('hoverClass').addClass('out')
},
drop: function (event, ui) {}
})
});
function revertDraggable($selector) {
$selector.each(function () {
var $this = $(this);
console.log($this.data('originalPosition'));
position = $this.data('originalPosition');
if (position) {
$this.animate({
left: position.left,
top: position.top
}, 500, function () {
$this.data("orignalPosition", null)
})
}
})
}
$(".no_entry a").click(function (e) {
e.preventDefault();
revertDraggable($(".drag"))
});