Prompt how to implement a simple drag and drop with Hammer.js. 1 DIV:
<div class="first"></div>
Javascript:
var element = $('.first').get(0);
var hammertime = new Hammer(element);
hammertime.on('pan', function(e) {
var tapX, tapY;
tapX = e.center.x;
tapY = e.center.y;
this.style.left = tapX;
this.style.top = tapY;
});
I need to make this div I could move around the screen. At the moment I would not succeed. The situation is not complicated, I just could not find even the simplest implementation, move the block, I would appreciate if you can help me to implement a simple drag and drop.
http://jsfiddle.net/0fawast9/
I am seeking for a simple drag & drop solution too, and found your post.
It seems that hammer 1.1.3 not firing "pan" event. Also, "this" in the event listener refers to the function itself, and left/top uses string with "px". I modified your code a bit
var element = $('.first').get(0);
var hammertime = new Hammer(element);
hammertime.on('pan', function(e) {
var tapX, tapY;
tapX = e.center.x;
tapY = e.center.y;
console.log(tapX + ' --- ' + tapY);
element.style.left = tapX + "px";
element.style.top = tapY + "px";
});
http://jsfiddle.net/0fawast9/11/
Hope can help you despite the question is asked a year ago :)
Related
So, I have been trying to create a platformer, but I only know so much about HTML. I have this snippet of code, and I am trying to figure out how to change the coordinates of it so I can finish my platformer.
var logo=document.createElement("img");
logo.src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
document.body.appendChild(logo);
//I am using the Google Logo so you can see the image.
If you mean a position of any element in page you can do it by using below code;
var logo=document.createElement("img");
logo.src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
document.body.appendChild(logo);
logo.style.position = "absolute";
logo.style.left = x_pos+'px';
logo.style.top = y_pos+'px';
Or do it as a function so you can attach it to an event like onmousedown
function placeDiv(x_pos, y_pos) {
var logo=document.createElement("img");
logo.src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
document.body.appendChild(logo);
logo.style.position = "absolute";
logo.style.left = x_pos+'px';
logo.style.top = y_pos+'px';
}
I am aware of the fact that variations of that question were asked many times before. Looking through Google output I found pages with examples like that:
function point_it(event) {
pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;
document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;
}
The code works, but when I look at
MouseEvent.offsetX it says "This is an experimental technology...".
So my question is, is it save to use the above construction or not? Is it better to learn how to use JQuery?
Please try this
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
}
Call this function on "onClick" event. You can get the coordinates.
Output the coordinates of the mouse pointer when the mouse button is clicked on an element.
So Im trying to make something where the user is able to drag planets along their orbits and it will continuously update the other planets. Ideally I would like this to work with ellipses too.
So far I can drag an image node with jquery and check/change the coordinates, but i cannot update the position reliably while the user is dragging the object. I know there is an axis and a rectangle containment for draggable but this doesn't really help me.
I have a site for calculating planetary orbits http://www.stjarnhimlen.se/comp/ppcomp.html and a formula i think should help me if i can figure out how to constrain the draggable object with coordinate checks Calculating point on a circle's circumference from angle in C#?
But it seems like there should be an easier way to have a user drag a sphere along a circular track while it updates coords for other spheres
here's what i have so far. It's not much
http://jsfiddle.net/b3247uc2/2/
Html
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
Js
var $newPosX = 100,
$newPosY = 100;
//create image node
var x = document.createElement("IMG");
x.src = "http://upload.wikimedia.org/wikipedia/commons/a/a4/Sol_de_Mayo_Bandera_Argentina.png";
x.width = 100;
x.height = 100;
x.id = "sun";
x.hspace = 100;
x.vspace = 100;
document.body.appendChild(x);
//coords
var text = document.createTextNode($newPosX + " " + $newPosY);
document.body.appendChild(text);
//make sun draggable and update coords
$("#sun").draggable({
drag: function (event, ui) {
$newPosX = $(this).offset().left;
$newPosY = $(this).offset().top;
}
});
//0 millisecond update for displayed coords
setInterval(check, 0);
function check() {
//tries to constrain movement, doesn't work well
/*
if ($newPosX > 300) {
$("#sun").offset({
left: 200
});
}
*/
text.nodeValue = ($newPosX + " " + $newPosY);
}
Edit:
I found this and am trying to modify it to suit my purposes but have so far not had luck.
http://jsfiddle.net/7Asn6/
Ok so i got it to drag
http://jsfiddle.net/7Asn6/103/
This is pretty close to what I want but can be moved without being clicked on directly
http://jsfiddle.net/7Asn6/104/
Ok final edit on this question. This one seems to work well and have fixed my problems. I would still very much like to hear peoples implementation ideas or ideas to make it work smoother.
http://jsfiddle.net/7Asn6/106/
I created a really simple map and I wanted it to be dragable.
Here is the code:
http://jsfiddle.net/AeABp/
It works, I can move the map around how I want. But I want it to be locked to the "window", so that there is never white space when it get dragged, I hope you understand what I mean.
I also had a look at the the overview from jquery-ui, but didn't find anything that I needed.
You need to constrain movement to a set of coordinates to make it work properly. Took a bit of messing with, but the containment constrains the element based on the top left corner of the element.
$(function() {
var con = $('#container');
var cw = con.width( ), ch = con.height( );
var map = $('#map');
var mw = map.width( ), mh = map.height( );
var x1 = -mw + cw, y1 = -mh + ch;
map.draggable({containment:[x1,y1,0,0]});
});
There's an easy way to do it (if i understood well):
$('#map').draggable({
containment: 'window',
scroll: false
});
At onclick event I am adding marker (image pin.png):
var relativeX = event.pageX;
var relativeY = event.pageY;
R.image("pin.png", relativeX, relativeY, 22, 22);
R in this code is Raphael paper: var R = Raphael("paper", 500, 500);
And I have to add also textbox next to this pin. It will be something like description of this marker. There should also be delete icon next to it that would remove both marker and textbox. User can add unlimited number of markers.
How can I add this textbox and icon/button to remove both marker and it's textbox?
I am using JQuery and Raphael.
Raphael's ability to handle text is absolutely horrible. I recently had to do something simular for a project, and i ended up using an HTML5 canvas to generate an image, and then load that image into my project.
So say you create your rect in Raphael, then you'll want to generate an image with your description in it:
var width = myRect.getBBox().width
var height = myRect.getBBox().height
var canvas = jQuery("<canvas width="+width+"px height="+height+"px />");
var context = canvas[0].getContext("2d");
context.font = "10pt Calibri ";
context.textAlign = "left";
context.textBaseline = "top";
context.fillText("this is text", xPos, yPos);
and then you'll want to move it into raphael:
var img = canvas[0].toDataURL("image/png"); //turns the canvas object into a png and returns the dynamic url
var bb = myRect.getBBox();
paper.image(img,bb.x,bb.y,300,400)
Its not the 'easiest solution in the world.. but i think you'll find that other options are not very fun to deal with.
Other options include
var description = paper.text(0,0,"this is text");
which may work better for you, but if you're doing any thing with zooming in and out, or even possibly dragging objects, you will have a hard time.
as for your adding markers bit, you'll probably want a function that says something like
function addMarker(x,y){
var marker = paper.set();
marker.push(
paper.rect(x,y,5,20).attr({fill:"#000"}),
paper.rect(x,y,10,5).attr({fill:"#000"}),
);
}
and you'll want a click function as well, something like
$("paper").click(function(e){
addMarker(e.offsetX,e.offsetY)
});
I hope this helps some. Feel free to comment if you need any more help.
edit:
To remove raphael elements, you can use
myElement.remove();
or even
myElement.hide();
edit:
I thought you might have been looking for an input field... Which is something that Raphael can't handle. So you're going to have to do some work arounds.
If you create an input field and then position it absolutely on top of your raphael program you can achieve this.
var textbox = $("<textarea/>");
textbox.css({"z-index" : 2, "position" : "absolute"});
textbox.css("left",myRaphaelElement.getBBox().x)
textbox.css("top",myRaphaelElement.getBBox().y)
$("body").append(textbox)
and i imagine you're going to want the user to be able to save what they write.. which is where you'll add a butotn and do something like
button.onclick(function(){
// write code here that involves the bit i wrote earlier in my post
// that takes textbox.val() as your text.
});
better?
I ended using simple javascript:
var relativeX = event.pageX;
var relativeY = event.pageY;
$('.marker').append('<div class="pin_container" style="top:' + relativeY + 'px; left:' + relativeX + 'px;"> <input type="text" name="textbox" id="textbox' + counter + '" value="" class="pin_textbox"><input type="button" id="remove" class="delete_button" value=" "></div>');
counter++;
$(".delete_button").click(function () {
$(this).parent().remove();
});
Operations on text in Raphael are way to much complicated.