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)
Related
I am new to Jquery and I am having some problem with my code. My program has a container and a small menu below. I have some img elements class piece that I can drag to my container and move around. I want to drop some other img element class cap inside my dragged piece items but when I drop the cap over the piece it didn't show up. When I see the console log I can see that the element has a child element but I cannot see it. What do you think is my problem?
var x = null;
$( function () {
$(".piece").draggable({
cancel: "a.ui-icon",
revert: "invalid",
helper: 'clone',
containment: '#container',
});
$(".piece").droppable({
accept: ".cap",
drop: function( event, ui ) {
x= ui.helper.clone();
x.appendTo(this);
}
});
$(".cap").draggable({
cancel: "a.ui-icon",
helper: 'clone',
containment: '#container',
});
$("#container").droppable(
{
accept : ".piece",
drop : function(event, ui)
{
x = ui.helper.clone();
x.css("width", 200);
x.css("height", 200);
x.draggable({
containment: '#container',
cursor: 'move',
});
x.appendTo(this);
x.droppable({
accept: ".cap",
drop: function( event, ui ) {
x= ui.helper.clone();
x.css("width", 200);
x.css("height", 200);
alert(' was dropped onto me!' );
x.appendTo(this);
console.log("this");
console.log(this);
}
});
ui.helper.remove();
}
});
});
I expect the output to be the cap over the piece but the cap didn't show over the piece. You can see the fiddle at: https://jsfiddle.net/littletrives/6ktub3a9/
Your code is placing the cap inside the piece correctly, as you have noticed.
The problem is that <img> elements can not contain elements (source: img specification, content model nothing specification). Because your cap <img> is inside of the piece <img>, it is not displayed.
A solution could be to add a <div> with the src of the piece as a background-image instead of adding it as an <img> tag. That way, you could add the cap <img> inside of it.
I made a fork of your jsfiddle with a small example: https://jsfiddle.net/tp7e2no1/1/
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 have been trying to clone and drop a draggable at the position in a droppable at the coordinates where the drop happens. I have found examples online that deal with appending draggables to droppables, but they all seem to move the draggable to a specific part of the droppable on the initial drop.
Here is an example that does just that: - http://jsfiddle.net/scaillerie/njYqA/
//JavaScript from the jsfiddle
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
Is there anyway I can make the draggable stay at the coordinates where the drop occured?
you must define the coordinates in the cloned element on the drop:
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
var clone=jQuery(ui.draggable).clone().addClass("dropped").draggable();
clone.css('left',ui.position.left);
clone.css('top',ui.position.top);
jQuery(this).append(clone);
}
});
and also set the position absolute by css on the cloned components
.ui-layout-center .component {
position:absolute !important;
}
Here is working: http://jsfiddle.net/o2epq7p2/
Edited you code and used appendTo() and set the offset
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
var _this = jQuery(this);
if (!ui.draggable.hasClass("dropped")) {
var cloned = jQuery(ui.draggable).clone().addClass("dropped").draggable();
jQuery(cloned).appendTo(this).offset({
top : ui.offset.top,
left: ui.offset.left
});
}
}
});
});
ui in the drop handler contains the dragged element's position absolute to the page. You need to transform those values to a position relative to the drop target and absolute position the cloned element inside the drop target using these values.
drop: function(e, ui) {
if (!ui.draggable.hasClass("dropped")) {
var parentOffset = jQuery('.ui-layout-center').offset();
var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable();
dropped.css('left', (ui.position.left - parentOffset.left) +'px');
dropped.css('top', (ui.position.top - parentOffset.top) +'px');
jQuery(this).append(dropped);
}
}
http://jsfiddle.net/3Lnqocf3/
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"
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();
}
});