I work with draggable and dropablle object, and I have issues with jumping objects on random place.
I have few dropablle areas, and dragable objects, for this I use script:
$('.draggable-box').draggable();
For droping I use this script:
$('.draggable').draggable({
stop(e, ui) {
},
});
$('.grid-item').droppable({
accept: '.draggable',
drop(e, ui) {
ui.draggable.appendTo(this);
},
});
As you can see on attachment it is jumping to random place in the page.
One solution I found:
$('.draggable').draggable({
stop(e, ui) {
$(this).css({
left: 0,
top: 0,
});
},
});
$('.grid-item').droppable({
accept: '.draggable',
drop(e, ui) {
ui.draggable.appendTo(this);
},
});
But on this case it's stuck on one place, I try to change css values top left, it's no working. As I understood it's taking left and top from first storing box, and for this I get width of the box
var width = $(".box-legend").width();
var currentWithd = ui.position.left;
And try to minus from final position like this:
$('.draggable').draggable({
stop(e, ui) {
$(this).css({ left: currentWithd - width})
},
});
But every time when I drag element it's jumping randomly, for now i tried and I have no idea how to fix :(
So end result should be dragging element to the storage box, and this element stay on position not jumping.
Related
I am trying to create a function in the Angular system which will produce an image of the map using html2canvas
The following is the current function:
window.emapComponent.service.getMap('mapApi').then((map) => {
html2canvas(document.getElementById("mapApi"), { useCORS: true }).then(function (canvas) {
canvas.screenshotDataURI = canvas.toDataURL("image/jpg", 0.5);
canvas.toBlob(function (blob) {
saveAs(blob, oRequest.fileName)
});
});
})
What happens is that in the system itself, as soon as I drag the map with the mouse, the photo comes out weird (file attached)-
I noticed in the elements of html that although I see the objects of the layers adjusted to the map, in practice the div itself is dragged from place to place and this is what I get in the picture
I would be happy to help with this
I am attempting to create an animation using jQuery but I am having an issue, the animation is broken down into cloning a div and placing in the DOM, changing the divs ID, animating the original div and then deleting the div this all works fine but I then assign the cloned element the original divs ID(since this is used for repeating the animation) and the cloned element moves to where the deleted element was.
Is this how IDs are supposed to work.
I have tried using .remove() on the original element and I tried assigning the original element to a variable and the using .remove() on that and I have tried changing its id then deleting that id none of these have worked.
//animation is here
$("#SecondPage").css("transform-origin", "center left");
$("#Corner").css({
"display" : "none",
"visibility" : "hidden"
})
//making the page to go underneath
$("#SecondPage").css("z-index","3");
let NewPage = $("#SecondPage").clone(true, true);
$(NewPage).attr("id", "NewSecondPage");
$(NewPage).css({
"left" : 0,
"top" : 0,
"position":"absolute",
"z-index": "1"
})
$('#SecondPageContainer').append(NewPage);
//after delete secondpage and change new cloned page to second page
//very important this makes sure that the rotation is centered around the left side of the page rather than its center making the page rotation effect
$({
deg: 0
}).animate({
deg: 180
}, {
duration: 2000,
step: function (now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$('#SecondPage').css({
transform: 'rotateY(' + now + 'deg)'
});
},
done : function(){
$("#Corner").css({
"display" : "block",
"visibility" : "visible"
})
}
});
setTimeout(function () {
$("#FirstPage").attr("src", FirstPage);
$("#SecondPage").remove();
$("#NewSecondPage").attr("id", "SecondPage");
$("#SecondPage").attr("src", SecondPage);
//this will be called when the image is rotated
}, 2000);
I want to create a GoogleMap like draggable div (as in this example http://tech.pro/tutorial/790/javascr...in-a-container).
But with ExtJs I did not find a way to achieve this without get rid of the Region...
I have a container which fit the screen and I have a huge div inside it (more than 10 000 px) which is centered (called it "area").
When I create an Ext.dd.DD class with this "area" element as a target, and start to drag... the DragDrop fonctionnality doesn't work as the div is stuck in the top-left corner.
Any idea on how to achieve this?
(Obviously, I don't want scoll, but drag and drop scroll).
Thanks in advance,
PsychoKrameur
PS: I'm using ExtJs 5.1
With ExtJS 5.1 you can use the TouchScroller, but be careful the class is private. That means it can change in further releases.
Example: https://fiddle.sencha.com/#fiddle/lmn
document.addEventListener("dragstart", function(e) {
e.preventDefault(); //This for the image otherwise it will dragged in IE
});
var panel = Ext.create("Ext.Panel", {
style: {
cursor: "move"
},
width: 400,
height: 400,
items: [{
xtype: "image",
width: 1019,
height: 1019,
src: "http://tech.pro/_sotc/sites/default/files/202/images/duck.jpg"
}],
renderTo: Ext.getBody()
});
Ext.defer(function() {
var childSize = panel.items.first().getSize();
var size = panel.getSize();
var scroller = Ext.scroll.TouchScroller.create({
element: panel.getOverflowEl()
});
scroller.scrollTo(size.width / 2 - childSize.width / 2, size.height / 2 - childSize.height / 2); //center the image
}, 1);
I'm trying to implement dragging an item onto a jquery slider. For example, if the item is dropped onto 86% of the slider I would like to POST this position to the server so the item can be place 86% along the result set on the server.
How do you detect dropping onto a jQuery slider and the percentage POSTed to the server?
Since I'm not so good at explaining things, I made a jsFiddle for you. Although this might not be exactly what your looking for, it should be a good starting point!
Here's the code :
$(function () {
//the draggable object
$("#dragobject").draggable();
//Prepare the slider
var range = 100,
sliderDiv = $("#slider");
// Activate the UI slider
sliderDiv.slider({
min: 0,
max: range,
create : function(){
$(this).find(".ui-slider-handle").hide();
}
});
// Number of tick marks on slider
var position = sliderDiv.position(),
sliderWidth = sliderDiv.width(),
minX = position.left,
maxX = minX + sliderWidth,
tickSize = sliderWidth / range;
//Set slider as droppable
sliderDiv.droppable({
//on drop
drop: function (e, ui) {
var finalMidPosition = $(ui.draggable).position().left + Math.round($("#dragobject").width() / 2);
//If within the slider's width, follow it along
if (finalMidPosition >= minX && finalMidPosition <= maxX) {
var val = Math.round((finalMidPosition - minX) / tickSize);
sliderDiv.slider("value", val);
alert(val + "%");
//do ajax update here to set the position
/*$.ajax({
type: "POST",
url: url,
data: val,
success: function () {
//congrats
},
dataType: dataType
});*/
}
}
});
});
And here's the jsFiddle link : jsFiddle example
Hope it helps,
Marc.
SOURCES :
Jquery slider that slides while mouse move,
jQuery UI slider
Since you are using jQuery, lets assume you are using jQuery UI for your drag and drop. First read this: http://api.jqueryui.com/droppable/#event-drop
Then realize that you get the offset position of the dropped element relative to the droppable container as part of the event. This would be where you could compute that into percentage if you needed.
For example, dropped at position left -> 90px of a container that you know to be 100px wide means 90% is your magic number.
Or if you are using native drag and drop, check out this simple edit: http://jsbin.com/ezuke/3283/edit . If you pop a console log on the event in the drop event, you will see that it also exposes the offset of where you dropped it and you could again consume that in your calculation of %.
I'm using this script:
var canvas = new fabric.Canvas('game_canvas', { selection: false });
fabric.Image.fromURL('images/bg.jpg', function(img) {
img.set('left', 1024/2).set('top', 600/2).set('zindex', 0);
canvas.add(img);
});
fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) {
img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1);
canvas.add(img);
});
fabric.Image.fromURL('images/player-board.png', function(img) {
img.set('left', 254/2).set('top', (122/2)).set('zindex', 2);
canvas.add(img);
});
fabric.Image.fromURL('images/player-board-top-red.png', function(img) {
img.set('left', 203/2).set('top', (109/2)).set('zindex', 3);
canvas.add(img).bringToFront(img);
});
3rd image draw is working properly and showing one on top of the other. But if I add 4th one it's hiding behind 3rd. If I specify zindex of the image it's still under 3rd only.
What is wrong with this? Am I doing something wrong here? Please help.
Thanks
Peter
There are couple of issues here.
1) You can't change zindex of images by setting their zindex property. Fabric images simply don't have such property and changing it doesn't change z index of images on canvas. This makes all those .set('zindex', 0), .set('zindex', 1), etc. pretty much a no-op.
2) bringToFront works as expected here, bringing last image all the way to the top of the drawing stack. But the problem is that "images/player-board-top-red.png" image which you're loading last is not guaranteed to be the last one added. Those 4 requests are asynchronous; they are coming in any order, and so callbacks are executed in any order as well. In my test, for example, the last image comes second, callback executes, image is brought to the front, but is then "overwritten" by following 2 callbacks.
How to make last image render on top? Well, we can simply check that all images are loaded before attempting to bring last one to the top:
var img4;
// ...
function checkAllLoaded() {
if (canvas.getObjects().length === 4) {
canvas.bringToFront(img4);
}
}
// ...
fabric.Image.fromURL('images/1.png', function(img) {
img.set('left', 0).set('top', 0);
canvas.add(img);
checkAllLoaded(img);
});
// load other images, making sure to include `checkAllLoaded` in callback
fabric.Image.fromURL('images/4.png', function(img) {
img4 = img.set('left', 0).set('top', 0);
canvas.add(img);
checkAllLoaded(img);
});
By the way, don't forget that you can pass an object to set method like so:
img.set({ left: ..., top: ... });
And since set is chainable and returns reference to an instance, you can even pass it to add like so:
canvas.add(img.set({ left: ..., top: ... }));
Hope this helps.
You can use canvas.insertAt(object,index); instead of canvas.add(object) to set object's zIndex as per your choice.
Also you can get any object by using:
canvas_object = canvas.item(index);
If you want to bring that object in front, use:
canvas_object.bringForward()
//or
canvas_object.bringToFront()