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(); }
});
});
Related
Apologies in advance if I am bad at describing this problem... hope you can still understand it.
Right now I have a Div that has its display set to 'none'.
When I drag and drop a button on the screen, it will then add a class to unhide the div.
Those above work fine, but what I cannot figure out is how to have the div appear exactly at where I dropped the button, rather than always appearing at a fixed location in the middle of the screen (which is what it is doing right now).
Would appreciate any help I can get! Here is the part of the javascript I am using (please let me know if this isn't sufficient info):
$(document).ready(function() {
$('.js-hotspot').draggable({
helper: "clone",
revert: false,
start: function(event, ui) {
console.log("Started");
},
stop: function(event, ui) {
addAnyHotspot();
$( ".hotspot-tooltip" ).addClass( "open" ); //Unhide the div
}
});
});
I managed to solve it. This is my new code:
$(document).ready(function() {
$('.js-hotspot').draggable({
helper: "clone",
revert: false,
start: function(event, ui) {
console.log("Started");
$(document).ready(function() {
$(this).on("drag", function(e) {
var x = e.pageX;
var y = e.pageY;
var el = $("#meh"); //assign #meh to the div that needs to be opened
el.css('position', 'absolute');
el.css("left", x);
el.css("top", y);
console.log("Shifted Position");
})
});
},
stop: function(event, ui) {
addAnyHotspot();
console.log("AddAnyHotSpot");
$( ".hotspot-tooltip" ).addClass( "open" );
}
});
});
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 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 building some sort of a playlist creator. I have some items the user can choose from and a horizontal sortable timeline area to drop those items on.
The Draggable:
$(".Name:not(#Add a .Name)").draggable({
revert: 'invalid',
start: function(){
$('#MainPage').css('cursor', '-moz-grabbing');
$(".Name").css('cursor', '-moz-grabbing');
},
// helper: "clone",
helper: function() {
return $("<div class='"+$(this).parent().attr('class')+"' id='"+$(this).parent().attr('id')+"'><div class='"+$(this).attr("class")+"' id='"+$(this).attr("id")+"'>"+ $(this).attr("class").split(' ')[1] +"</div></div>");
},
stop: function() {
$('#MainPage').css('cursor', 'auto');
$(".Name").css('cursor', '-moz-grab');
},
connectToSortable: "#TimelineDrop",
appendTo: '#MainPage',
containment: 'DOM',
zIndex: 800,
addClasses: false
});
The Sortable:
$("#TimelineDrop").sortable({
over: function(event, ui) {
var Breite = ((TimeSpace*5)/(TimeSpace/(currentspacing+24)))-2;
$("#TimelineDrop").append("<div class='TimelineMarker' style='width:"+ Breite +"px;'>\u00A0</div>");
},
receive: function(event, ui) {
dropped=true;
AddElementToTimeline($(this), event, ui, dropped);
},
start: function( event, ui ){
$('#MainPage').css('cursor', '-moz-grabbing');
$('.TimelineElement').css('cursor', '-moz-grabbing');
drag=true;
},
axis: "x",
stop: function( event, ui ){
$('#MainPage').css('cursor', 'auto');
$('.TimelineElement').css('cursor', '-moz-grab');
database.updateElementPosition($('.TimelineElement').index($(ui.item)), $(ui.item).children('.TimelineElementTitle').attr('id').split('D')[1], GET('id'));
drag=false;
}
});
I tried all kinds of different stuff but can't get it to work propperly. What would like to be able to is drag items from the available area to the timeline und drop them between allready appended ones. So far the helper allways get appended (vertically) above the existing elements and when I drop it the final element get append at the very last position. I hope It's clear what I'm trying to archive...
I have a fiddle right here:
http://jsfiddle.net/5SBax/4/
I want the marker to be displayed where the element will be added (between others). And I need to get rid of the helper element which also get added every time...
Take a look at this fiddle. I'm not quite sure what you are asking, but this is a good example of drag and drop capabilities. I can't comment, and I am not quite sure what you are asking. But best of luck to you!
http://jsfiddle.net/cuhuak/4CHDZ/
function FieldType(typeName, name) {
var self = this;
self.TypeName = ko.observable(typeName || "");
self.Name = ko.observable(name || this.TypeName());
self.createField = function () {
return new Field(
{
Name: this.Name(),
TypeName: this.TypeName()
}
);
}
self.onDragStart = function(event, ui) {
dropFieldType = ko.utils.domData.get(this, "ko_drag_data");
};
self.onDragStop = function(event, ui) {
dropFieldType = null;
};
}
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();
}
});