I have created a website where the users can pull widgets from a pop up modal onto the main drop zone and create widgets. Initially, the widgets are just images eg: BBC. When dragged onto the droppable area they become widgets that pull in information from an API. I have set up location saving using local storage so that when the user refreshes the page, the widgets stay in their location.
The problem I am having, is that the widget will not save its location
until the user has refreshed once, then it will continue to save from
here
I think I know why, i just don't know how to fix it! See info below on what I have gathered.
My code for drag and drop:
$(function () {
$("#techcrunch").draggable({ revert: 'invalid', helper:"clone",
containment:"#dropZonetc",snap: '#dropZonetc',addClasses: false});
$( "#dropZonetc" ).droppable({
accept: '#techcrunch',
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function( event, ui ) {
var offset = ui.helper.offset();
var dropElem = ui.helper.clone()
$(dropElem).html("<div id='techcrunchwidget' class='widgets'><img src='http://i.newsapi.org/techcrunch-s.png' alt='Tech Crunch' height='22' width='100'><button class='closewidget' onclick='destroytechcrunch()'>X</button><div class='techCrunchContent'><ul id='techcontent'></ul><script>retrieveTechCrunchNews();</script></div></div>");
dropElem.appendTo( this ).offset( offset ).hide().fadeIn(1500);
localStorage.setItem("techcrunch", "true");
$( "#techcrunch" ).remove();
$("div.widgets").draggable();
}
});
});
My code for saving the location:
$(function () {
var widget3 = $("#techcrunchwidget");
updatePosition3(widget3);
widget3.draggable({ stop: function () {
var left = this.offsetLeft;
var top = this.offsetTop;
console.log(left);
console.log(top);
localStorage.setItem("lefttech", left);
localStorage.setItem("toptech", top);
$("div.widgets").draggable();
}
});
window.addEventListener("storage", function (e) {
updatePosition3(widget3);
},
false);
});
function updatePosition3(widget3) {
var left = localStorage.getItem("lefttech");
var top = localStorage.getItem("toptech") - 20;
widget3.css({ left: left + "px", top: top + "px" });
widget3[0].offsetTop = top;
widget3[0].offsetLeft = left
}
**
I am 80% sure it is because I am appending the dropElem which is a
clone, therefore the save script is not finding the "techcrunchwidget"
as it is the clone until refresh, this can be seen in the image below
**
Chrome Element Inspecter
Once refreshed, it is not wrapped in that wierd class.
Thanks for your time!
I would try simply append the new HTML in drop and just remove the helper.
drop: function( event, ui ) {
var offset = ui.helper.offset();
var $widget = $("<div id='techcrunchwidget' class='widgets'><img src='http://i.newsapi.org/techcrunch-s.png' alt='Tech Crunch' height='22' width='100'><button class='closewidget' onclick='destroytechcrunch()'>X</button><div class='techCrunchContent'><ul id='techcontent'></ul><script>retrieveTechCrunchNews();</script></div></div>");
$widget.appendTo(this).offset(offset).hide().fadeIn(1500);
localStorage.setItem("techcrunch", "true");
ui.helper.remove();
$("#techcrunch").remove();
$("div.widgets").draggable();
}
Untested solution.
Related
I'm trying to drag "templates" (initially as clones) from a "store" into droppable slots. Thereafter I want to be able to drop the dragged item into whatever slot I wish. Draggables are set as follows:
$( ".template" ).draggable({
helper: "clone",
}
);
$( ".item" ).draggable();
I got round the issue of the thing re-cloning by replacing the "template" class with an "item" class on first drop and within the drop function switching from a clone to a straight element as follows:
$( ".template-slot" ).droppable({
accept: ".template, .item",
drop: function( event, ui ) {
if(ui.draggable.hasClass("template")) {
$(this).append(ui.draggable.clone())
// add item class
$(".template-slot .template").addClass("item");
// remove template class
$(".item").removeClass("ui-draggable template");
// expand to fit the slot
$(".item").addClass("expand-to-slot");
// make it draggable again
$(".item").draggable();
}
if(ui.draggable.hasClass("item")) {
$(this).append(ui.draggable);
}
}
});
The first drag and drop works okay. the problem arises on the second drag and drop. The element drags okay but when dropped it gets placed twice as far in whatever direction I drag it. So, for example, if I've dragged it 50px to the right, it drops 100px to the right. the same with up and down etc.
I suspect it's something to do with the offset being cumulative but haven't worked out why it's doing this or how to fix it.
I've created a fiddle here: https://jsfiddle.net/stefem1969/a86jmnxu/10/ to show the problem.
Hope someone can help.
Working Example: https://jsfiddle.net/Twisty/fu83zq2y/11/
JavaScript
$(function() {
function makeDrag(obj, opt) {
if (obj.hasClass("ui-draggable")) {
obj.removeClass("ui-draggable");
obj.attr("style", "");
}
if (opt === undefined) {
opt = {};
}
obj.draggable(opt);
}
makeDrag($(".template, .item"), {
helper: "clone",
});
$(".template-slot").droppable({
accept: ".template, .item",
drop: function(event, ui) {
if (ui.draggable.hasClass("template")) {
console.log("it has the template class!");
var newItem = ui.draggable.clone();
newItem.toggleClass("template item");
newItem.addClass("expand-to-slot");
newItem.appendTo($(this));
makeDrag(newItem);
}
if (ui.draggable.hasClass("item")) {
console.log("it has the item class!")
var droppableOffset = $(this).offset();
console.log("droppableOffset: ", droppableOffset);
ui.draggable.attr("style", "").appendTo($(this));
}
}
});
$(".template-store, .thagomizer").droppable({
accept: ".item",
drop: function(event, ui) {
ui.draggable.remove();
}
});
});
Part of draggable is to set a top and left when moving it around. Even if you append the item to another element, it will still have those. Clearing that can help accomplish what you're looking for.
The makeDrag() is just helpful to perform the same operations a lot.
Hope this helps.
On this script I have drag and drop fieldsets (left menu - top). Drag multiple fieldsets into the right "working area". In those fieldsets is an area for dropping Fields (of which I have one, left menu - bottom). Drop "Field One" into any of the dropped Fieldset (under the line in the "Drop Fields Here" area) in the working area.
I want to then move that Field One from the Fieldset I dropped it into and into the other Fieldset in the working area. I have got the Field One draggable but I cannot get it to append to the new Fieldset.
I am not wanting to delete the Field and replace it with another clone from the left menu. I am new to jquery so my code may be a bit messy. Any help is greatly appreciated. Jsfiddle and code below.
I believe the code issue is between line 21-29...but I am not sure.
JsFiddle Link
$(document).ready(function() {
var fs_count = 0;
$("#drop-area").droppable({
accept: '.ui-draggable:not(.draggableField , .activeField)',
drop: function(event, ui) {
fs_count++;
var clone = $(ui.draggable).clone()
clone.addClass('.connectedSortable')
// clone.removeClass('.ui-draggable');
if (clone.hasClass('dropped')) {
return false;
}
clone.addClass('.connectedSortable').addClass('dropped').attr('id', 'fs_' + fs_count);
$(this).append(clone);
var fs_class = clone.attr('class');
alert('You added a field with class ' + fs_class);
var fieldsDroppable = $('#drop-area .ui-draggable:last-child .fieldDroppable');
fieldsDroppable.droppable({
accept: '.draggableField , .activeField',
drop: function(event, ui) {
var clone = $(ui.draggable).clone();
if (clone.hasClass('draggableField')) { // If else to prevent clones reproducing in Fieldsets when moving from original Fieldset.
clone.removeClass('ui-draggable , draggableField').addClass('activeField');
$(this).append(clone);
}
else {
// Append the div here?
}
var cloneClass = clone.attr('class'); // Temporary varialble for develpoment alert below
alert('you dropped a field' + cloneClass); // Temporary for development only
// Below re-register the "field" with jquery....not sure this is entirely correct.
var fieldsDraggable = $('#drop-area .ui-draggable .fieldDroppable .activeField');
fieldsDraggable.draggable();
}});
} });
$(".fieldDroppable").droppable({
accept: '.draggableField , .activeField',
drop: function(event, ui) {
var clone = $(ui.draggable).clone()
$(this).append(clone);
}
});
$(".ui-draggable").draggable({
opacity: 1.0,
helper: 'clone',
revert: 'invalid'
});
$(".draggableField").draggable({
opacity: 1.0,
helper: 'clone',
revert: 'false'
});
$(".activeField").draggable();
$("#drop-area").sortable({
handle: '.drag-handle',
update: function () { //triggered when sorting stopped
var dataAuto = $("#drop-area").sortable("serialize", {
key: "za",
attribute: "id",
});
alert(dataAuto);
}
});
$("#drop-area").disableSelection();
});
There will be a lot of work to do here, yet you can get over this hurdle like so:
https://jsfiddle.net/Twisty/6trmrfoo/32/
Basically, you want to assign a new .droppable() to a specific element in the field set when it is added to the #drop-area. I would advise using a function as you will do this a multitude of times.
You can also make use of .data() to store a source value along with the draggable elements. I only did this for fields since that was the only pace it seemed like it was needed. You can updated this once it's dropped into a fieldset so that future drag-n-drop operations can be handled properly, we don't want to clone the object we move it.
To move it, consider using .detach(). It'll detach the element from the current parent and can be used in chain to append or move into memory as a variable. Similar to .clone() just we're manipulating the actual object. .clone() is to "Copy & Paste" as .detach() is to "Cut & Paste".
JavaScript
$(function() {
var fs_count = 0;
function makeFieldTarget($fs) {
$fs.droppable({
accept: '.draggableField, .activeField',
drop: function(event, ui) {
var clone, cloneClass;
if (ui.draggable.data("source") == "sidebar") {
clone = $(ui.draggable).clone();
clone.removeClass('draggableField').addClass('activeField');
$(this).append(clone);
cloneClass = clone.attr('class');
console.log('DROPFIELD - you dropped a field from the side bar: ' + cloneClass);
clone.data("source", "fieldset").draggable({
zIndex: 1000
});
}
if (ui.draggable.data("source") == "fieldset") {
clone = ui.draggable;
clone.detach().attr("style", "").appendTo($(this));
cloneClass = clone.attr('class');
console.log('DROPFIELD - you dropped a field from a Field set: ' + cloneClass);
}
}
});
}
$("#drop-area").droppable({
accept: '.ui-draggable:not(.draggableField, .activeField)',
drop: function(event, ui) {
fs_count++;
var clone = $(ui.draggable).clone()
clone.addClass('connectedSortable');
if (clone.hasClass('dropped')) {
return false;
}
clone.addClass('connectedSortable dropped').attr('id', 'fs_' + fs_count);
$(this).append(clone);
var fs_class = clone.attr('class');
console.log('DROPAREA - You added a field with class ' + fs_class);
makeFieldTarget(clone.find(".fieldDroppable"));
$("#drop-area").sortable("refresh");
}
});
$(".ui-draggable").draggable({
opacity: 1.0,
helper: 'clone',
revert: 'invalid'
});
$(".draggableField").data("source", "sidebar").draggable({
opacity: 1.0,
helper: 'clone',
revert: 'false',
zIndex: 1000
});
$("#drop-area").sortable({
handle: '.drag-handle',
placeholder: "drop-place-holder",
items: ">div.dropped",
update: function() { //triggered when sorting stopped
var dataAuto = $("#drop-area").sortable("serialize", {
key: "za",
attribute: "id",
});
alert(dataAuto);
}
});
$("#drop-area").disableSelection();
});
https://jsfiddle.net/ianderso222/y9ynouxs/36/
I hope this makes sense, If I need to elaborate I will do so.
Right now the code is working pretty well, doing everything I need it to except this one issue. I just need to alert the order that the squares have been dropped in, after all 4 have been placed.
So, if square4 is placed in the large container, that would show up first in the alert. If square2 is in the last, smallest box it would be last in the list, and so on.
I would use sortable but I am afraid it would not work with the current setup. The resizing to different sized containers would not work, or at least I was not able to get it to work. If there is a way to keep the current structure of resizing to fill container and sliding into place I would say do that, but from everything I have seen I feel I would have to essentially start from scratch.
Here is the JavaScript, pardon the messy code:
$('.holderList li').droppable({
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
console.log(draggable.attr('id') + ' is ' + droppable.attr('id'));
var $this = $(this);
ui.draggable.position({
my: "center",
at: "center",
of: $this,
using: function(pos) {
$(this).animate(pos, 200, "linear");
}
});
ui.draggable.addClass('dropped');
ui.draggable.data('droppedin', $(this));
$(this).droppable('disable');
setTimeout(function() {
var dragID = ui.draggable;
if (!$(".ui-droppable").not(".ui-droppable-disabled").length) {
alert(draggable.attr('id'));
}
}, 400);
},
});
$(".square").draggable({
stack: ".square",
revert: function(event, ui) {
//overwrite original position
$(this).data("ui-draggable").originalPosition = {
width: 50,
height: 50
}
//return boolean
return !event;
},
drag: function(event, ui) {
var draggable = $(this).data("ui-draggable");
$.each(draggable.snapElements, function(index, element) {
ui = $.extend({}, ui, {
snapElement: $(element.item),
snapping: element.snapping
});
if (element.snapping) {
if (!element.snappingKnown) {
element.snappingKnown = true;
draggable._trigger("snapped", event, ui);
}
} else if (element.snappingKnown) {
element.snappingKnown = false;
draggable._trigger("snapped", event, ui);
}
});
if ($(this).data('droppedin')) {
$(this).data('droppedin').droppable('enable');
$(this).data('droppedin', null)
$(this).removeClass('dropped')
}
},
snap: ".holder",
snapMode: "inner",
snapTolerance: 8,
snapped: function(event, ui) {
var squareWidth = ui.snapElement.width();
var squareHeight = ui.snapElement.height();
ui.helper.css({
width: squareWidth,
height: squareHeight
});
}
});
Take a look at my solution:
Demo
First it assigns a data-current attribute to the droppable holder on every drop and sets it to the id of the draggable.
Then it itterates trough all the .holder elements and prints their data-current
Simple but works.
// On single drop
drop: function(event,ui){
...
droppable.attr('data-current', draggable.attr('id') );
}
//On all dropped
$('.holder').each(function(el){
console.log($(this).attr('data-current'));
});
Starting by simply generating a draggable box, and a handle at the top using jquery-ui draggable().
However, sometime the content inside of the box can be flash and this tends to cause the dragging function to move too slowly. I decided to move to a ghosting type system where you drag it and it shows a box where you are moving it, and then moves it to the location you drop this.
I have gotten it running perfectly in Chrome/Firefox, but cannot get it to run in either IE8 or IE9. Wondering if anyone had any suggestions. Below is the jquery specific code.
$(document).ready(function () {
$container = $('#container');
$container.draggable({
handle: "#header",
containment: "parent",
scroll: false,
helper: function () {
return "<div class='dragbox' style='width:" + ($container.width()) + "px;height:" + ($container.height()) + "px'></div>";
},
stop: function (e, ui) {
var top = ui.position.top,
left = ui.position.left;
$container.css({
'top': top + "px",
'left': left + "px"
});
}
});
});
Example can be found at http://jsfiddle.net/Ep5wu/.
Thanks in advance!
The argument 'ui' in drag stop event is the element that is dragged itself and not the the 'helper' div (green box) .. you need the top/left values of the 'helper' after the drag stops.
Try this ..works in IE10
$(document).ready(function () {
$container = $('#container');
$container.draggable(
{
handle: "#header", scroll: false,
helper:function () {
return "<div class='dragbox' style='width:" + ($container.width()) + "px;height:" + ($container.height()) + "px'></div>";
},
stop: function (e, ui) {
console.log(ui.helper);
var top = $(ui.helper).offset().top;
var left = $(ui.helper).offset().left;
$container.css({
'top': top + "px",
'left': left + "px"
});
}
});
});
Fiddle here : http://jsfiddle.net/Ep5wu/16/
I have a set of images placed as position:relative (showing one next to the other).
I use this code to drag and drop them (stolen from the jQuery API documentation, modified to my needs).
$(function() {
$( ".draggable" ).draggable({
start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).offset();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
pos_left = Startpos.left; //pos_left is global
pos_top = Startpos.top; //pos_top is also global
},
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).offset();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
$(this).css('position', "fixed"); //tried absolute and relative, too
$(this).css('left', pos_left);
$(this).css('top', pos_top);
}
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
id = $(this).attr('id');
alert(id);
}
});
});
What I am trying to do is to return the draggable element to its initial position, after user drops it. However because my elements are relatively positioned the initial left,top coords are the same for all of them (or this is what I understand from the documentation -- I might be wrong here). So although images return, they actually stack each one on top of the other.
What am I doing wrong? What am I supposed to do?
Well. Instead of doing that by yourself use the revert option of the draggable. From the jQuery UI docks:
$( ".selector" ).draggable({ revert: true });
You could make its position relative, top=0px, and left=0px. Worked for me with this code:
$(function(){
$('#draggable').draggable().append('<a href=# class=exit>x</a>');
});
$(function(){
$('.exit').click(function(){
$('#draggable').css({
'top': '0px',
'left': '0px',
'position': 'relative'
});
});
});