I am working on some kind of game that I can drag elements and on drag they have to move
left (plus or minus) depending on the drag direction.
I've tried like million ways of doing that.
The normal 'revert:true' is not working properly with horizontal elements, as the element
is reverted in a wrong position.
Finally, I worked it around with the animate() function in Jquery, And it really works
fine but it only drags the elements up and down, But left and right directions are not
working.
Here's my js script for doing that :
function setAllMatchesDraggable(){
$('.matches').not('.answer').draggable({
// Can't use revert, as we animate the original object
//revert: true,
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
create: function(){
// When the draggable is created, save its starting
// position into a data attribute, so we know where we
// need to revert to.
var $this = $(this);
if(($this).hasClass("flip_left") || ($this).hasClass("flip_right"))
{
$this.data('top',$this.position().top - 29);
$this.data('left',$this.position().left);
}else{
$this.data('top',$this.position().top);
$this.data('left',$this.position().left);
}
},
stop: function(){
// When dragging stops, revert the draggable to its
// original starting position.
var $this = $(this);
$this.stop().animate({
"top": $this.data('top')
},200,'easeOutElastic',function(){
$(this).stop().animate({"left":$this.data('left')},200,'easeOutElastic');
});
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
$(this).stop().animate({
"top": ui.helper.position().top
},200,'easeOutElastic',function(){
$(this).stop().animate({"left":ui.helper.position().left},200,'easeOutElastic',function(){
console.log(ui.helper.position().left);
});
});
}
});
}
I wish You could help. Thanks in advance :)
Use top and left in same function
$this.stop().animate({
"top": $this.data('top'),
"left" : $this.data('left')
},200,'easeOutElastic') ;
Give this a try:
...
create: function(){
var $this = $(this);
$this.data({
'top': $this.position().top,
'left': $this.position().left
});
},
stop: function(){
var $this = $(this);
$this.stop().animate({
top: $this.data('top'),
left: $this.data('left')
},200,'easeOutElastic');
},
drag: function(event, ui){
$(this).stop().animate({
top: ui.helper.position().top,
left: ui.helper.position().left
},0,'easeOutElastic');
}
...
Related
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.
I'm using jquery UI draggable. I do some works in drag function. for example I scale the dragging element according to it's position. I want to drag elements automatically to certain (x, y) (something like jquery animate({left:x, top:y}, 1000)); but I want to trigger drag function and scale element when is animating. how can I do this?
I suggest another approach to do that.
Use an external function to do the scale effect, and call it from both events (drag and animate):
var $myDraggable = $('#draggable').draggable({
drag: function( event, ui ) {
scale(ui.offset.left, ui.offset.top);
}
});
$('button').on('click', function(){
$myDraggable.animate(
{ left:100, top:100 },
{
duration: 1000,
progress: function(draggable){
scale(draggable.elem.offsetLeft, draggable.elem.offsetTop);
}
});
});
function scale(left, top){
//your scaling logic here
console.log("scaling", left, top);
}
See this example: FIDDLE
https://jsfiddle.net/moongod101/8gdvz9jL/
PS:This code offer a button toggle function
$(function(){
$button = $('button')
$box = $('.box')
$click = 0
$button.click(function(){
if($click !=0){
$click ++
$box.removeClass('active')
}else{
$click --
$box.addClass('active')
}
});
});
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'));
});
I'm using this piece of code to populate a div with the contents of a hovered element.
$('.gallery .thumbs a').hover(
function(){
var target = $(this);
$('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
$('.hover-box').css({'display':'block', 'top':top, 'left':left});
},
function(){
$('.hover-box').hide();
}
);
The problem is - what many seem to have had - that after adding the 'mouseleave' handler both the events start firing uncontrollably.
I know the bubbling issues related with mouseover/out but this seems to behave the same.
Anyone have an idea why this is happening?
EDIT:
Here's the deal on fiddle. Not the prettiest sight but function the same as my problem.
FIDDLE
It's because your function fires and re-fires each hover and at the end of each hover, so any time you move the mouse it fires twice. What you want to do instead is fire it on mouseenter of .thumbs a and mouseleave of .hover-box, like this
jQuery(function () {
jQuery('.thumbs a').hover(
function () {
var target = $(this);
jQuery('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
jQuery('.hover-box').css({
'display': 'block',
'top': top,
'left': left
});
});
$('.hover-box').mouseleave(function() {
$('.hover-box').hide();
});
});
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'
});
});
});