To explain what I am trying to do I have created an example where you can play with:
http://plnkr.co/edit/usrmiNkj5YJY5SlV8ETw?p=preview
I want to draw multiple tiles green while my mouse is down.
This:
<div ng-mousedown="drawImage($parent.$index,$index)"></div>
works only when the mouse is going down on the element not outside.
Is there an way to check if the mouse is already down and draw the tiles green?
Please use the code I made to create an working example.
You'll have to include a few more event handlers, for mouseup and mousemove, like this
<div class="tile" ng-repeat="x in y track by $index" ng-class="x" ng-mouseup="removeFlag()" ng-mousedown="setFlag($parent.$index,$index)" ng-mousemove="drawImage($parent.$index,$index)"></div>
Then add the functions
$scope.drawImage = function(y,x){
if ($scope.mouseIsDown)
$scope.map[y][x] = "green";
}
$scope.setFlag = function(y,x){
$scope.mouseIsDown = true;
this.drawImage(y,x)
}
$scope.removeFlag = function(){
$scope.mouseIsDown = false;
}
This sets a flag when the mouse is down, and sets the color when the cursor moves over an element and the mouse is down.
PLNKR
Related
I'm having a hard time figuring this out.
I have a bunch of divs (with some content inside them), and I want to be able to drag and drop them, horizontally. However, I want to move them by 100px increments (the left position needs to be 0, 100, 200 etc). Imagine having a table in the background with 100px wide cells and you can only move the element to another cell. Except there's no table.
jQuery is out of the question I think (I'm using Vue).
I won't write your code for you, but I'll help you figure it out by telling you where to start.
First, listen to the mousedown and mouseup events on the element:
<div v-on="{ mousedown, mouseup }">Some content</div>
Next register a mousemove listener on mousedown, and deregister it on mouseup:
methods: {
mousemove(e) {
const moved = e.offsetX - this.startX;
// The mouse has moved "moved" pixels.
// Now calculate whatever you want
},
mousedown(e) {
this.startX = e.offsetX;
e.currentTarget.addEventListener(this.mousemove);
},
mouseup(e) {
e.currentTarget.removeEventListener(this.mousemove);
},
}
I need to detect mouse movement on the drag of my websites scroll bar, this allows me to detect user inactivity.
When the scroll bar is being dragged the mouse move event is not firing.
Not working in IE11 and Chrome, I'm seeing the mousemove events fire in Firefox 32, I have not tested other browsers.
Sample code:
HTML
<div class="parent" style="background-color:black;width:100px;height:500px;overflow:scroll;">
<div class="child" style="background-color:blue;width:100px;height:1000px"></div>
</div>
Javascript:
var lastMove;
$(window).mousemove(function (e) {
lastMove = new Date();
$(".child").css("background-color", "red");
lastTimeMouseMoved = new Date().getTime();
var t=setTimeout(function(){
var currentTime = new Date().getTime();
if(currentTime - lastTimeMouseMoved > 10){
$(".child").css("background-color", "blue");
}
},10);
});
JS Fiddle:
https://jsfiddle.net/btdxha8k/
Binding to the scroll event is the solution I currently have but I was wondering if there is a more clean solution as I need to bind to 100+ div's that do not need scrolling events as this looks really redundant, dirty and I normally don't like using hacks like this in my code.
Cheers ;)
Mouse move event is triggered only when you move mouse within the screen.
Your issue here scrollbar is not the inner side of screen where mouse move event is captured so you shoul add scroll event with the same function
I'd guess that mouse events aren't raised because the scrollbar is technically outside of your page.
Instead, could you listen for the onscroll event?
https://api.jquery.com/scroll/
I have managed to implement a simple JavaScript dragging effect to create "panel windows" inside a webpage, in which I can drag the object from any corner or position. I have only used the onmousedown (to indicate a possible dragging), onmousemove (to perform dragging) and onmouseup (to stop dragging) events.
It works well except when I drag the object too near an edge and move the mouse even at a normal speed. When I move the mouse towards an area outside the object, the dragging fails until I move again to the object's area, and I have to click the object to stop dragging it.
It's like the mouse is too fast, but obviously it doesn't happen in native application windows because they are better implemented.
What checks could I add to my current code so it doesn't fail as much? It currently seems to support a little bit of this problem by somehow handling the onmouseout event, but when it happens the window shakes to return the mouse pointer to the object area, and it doesn't look so good.
JavaScript Simple Dragging Effect
<!doctype html>
<html>
<head>
<title>JavaScript Simple Dragging Effect</title>
<style type="text/css">
.moveableRect {
position:absolute;
width:320px;
height:200px;
background-color:rgba(254, 220, 186, 0.8);
}
</style>
</head>
<body bgcolor="#abcdef">
<span id="span0000" class="moveableRect"><b>Drag Me<hr /></b></span>
<textarea id="txt" cols="40" rows="12"></textarea>
<script>
//Custom variable to indicate that we
//must drag the SPAN:
///
document.getElementById("span0000").myDragFlag = false;
//When we click and hold the mouse down,
//we must activate the dragging process:
///
document.getElementById("span0000").onmousedown = function(e)
{
if(e.button==0)
{
//This is the part of the trick that allows us
//to drag the object from any starting position
//that we click on it:
///
this.startX=(e.pageX-this.offsetLeft);
this.startY=(e.pageY-this.offsetTop);
//This flag indicates that we must drag
//when moving the mouse while the button is pressed:
///
this.myDragFlag=true;
}
};
//When we move the mouse, we must follow
//the mouse cursor around:
///
document.getElementById("span0000").onmousemove = function(e)
{
var bcr=this.getBoundingClientRect();
if(this.myDragFlag)
{
//When we start dragging (moving the mouse
//while the mouse button is pressed)
//we will perform the effect of dragging from any
//initial position in the rectangle:
///
this.style.left = (e.pageX-this.startX)+"px";
this.style.top = (e.pageY-this.startY)+"px";
document.getElementById("txt").value=
"getBoundingClientRect.left="+bcr.left+"\n"+
"getBoundingClientRect.top="+bcr.top+"\n"+
"getBoundingClientRect.width="+bcr.width+"\n"+
"getBoundingClientRect.height="+bcr.height+"\n"+
"getBoundingClientRect.bottom="+bcr.bottom+"\n"+
"getBoundingClientRect.right="+bcr.right+"\n"+
"e.pageX="+e.pageX+"\n"+
"e.pageY="+e.pageY+"\n"+
"this.offsetLeft="+this.offsetLeft+"\n"+
"this.offsetTop="+this.offsetTop+"\n"+
"relatX="+(e.pageX-this.offsetLeft)+"\n"+
"relatY="+(e.pageY-this.offsetTop);
}
};
//When we release the mouse button,
//we must finish the dragging process:
///
document.getElementById("span0000").onmouseup = function(e)
{
if(e.button==0)
this.myDragFlag=false;
};
document.getElementById("span0000").onmouseout = function(e)
{
if(this.myDragFlag==true)
{
//In this code, we basically check that
//when the mouse slips out from the object
//area while we are still dragging, we will
//force moving the object back under the mouse
//pointer. Here we will check from a logical
//edge of 48 pixels, and we will move the object
//back to 90% within those pixels, vertically and/or
//horizontally. It makes look the object shaky
//but at least it is minimally functional:
///
var minEdge=48;
var edgeCorrect=0.90;
var minEdgeCorrect=(minEdge*edgeCorrect)|0;
var bcr=this.getBoundingClientRect();
var bcrw=bcr.width;
var bcrh=bcr.height;
if(this.startX<minEdge)
{
this.style.left = (e.pageX-minEdgeCorrect)+"px";
}
else if(this.startX>bcrw-minEdge)
{
this.style.left = (e.pageX-this.startX+minEdgeCorrect)+"px";
}
if(this.startY<minEdge)
{
this.style.top = (e.pageY-minEdgeCorrect)+"px";
}
else if(this.startY>bcrh-minEdge)
{
this.style.top = (e.pageY-this.startY+minEdgeCorrect)+"px";
}
}
};
</script>
</body>
</html>
Your event listener for onmousemove is placed on the draggable div. So if the mouse goes off of it, the event stops firing. And it goes off while dragging because it fires mousemove events at intervals instead of every pixel.
To fix it, put the mousemove listener on the container.
document.body.onmousemove
And you will probably need to change how you get the coordinates.
There are other ways too I imagine. But that's the easiest.
Edit
Started to doubt myself when I tried to fiddle this but eventually got it working:
http://jsfiddle.net/tg33u8mv/3/
document.body.onmousemove = function (e) {
if (myDragFlag) {
var draggable = document.getElementById("span0000");
var bcr = draggable.getBoundingClientRect();
draggable.style.left = (e.pageX - draggable.startX) + "px";
draggable.style.top = (e.pageY - draggable.startY) + "px";
}
};
And I changed myDragFlag to a scoped variable instead of this.myDragFlag.
Bonus
In this version I add a class when it is dragging. http://jsfiddle.net/tg33u8mv/4/
The CSS for this class currently disables highlighting, significantly improving the look. You could also make it change color or add a shadow for a nice effect.
I have an image that I would like to be able to move by dragging on the page. As I understand it should work by default in every browser, but for some reason it doesn't work for me.
Here is my page:
<div style="position:relative;width:1000px; height:900px;border:solid;z-index:30;float:left">
<div id="image-helper" style="position:absolute;width:1000px; height:900px;z-index:20;float:left" >
<img id="image" src="images/test.jpg" style="width:500px;height:400px;cursor:pointer;z-index:10;" alt=""/>
</div>
</div>
Do I miss something in css?
Thanks
To do drag and drop you need javascript, and in jquery, you can use the ui drag'n'drop : http://jqueryui.com/demos/draggable/
No you can't move an image just by doing this. You have to listen for mouse events to update the position of the image in javascript.
More specifically, you'll have to catch
mousedown
mousemove
mouseup
Here's a very raw demonstration : http://jsfiddle.net/dystroy/CvVte/
CSS :
img {
position: fixed;
}
Javascript :
var mouseIsDown = false;
$('img').mousedown(function(e){
mouseIsDown = true;
pos = $(this).offset();
e.preventDefault();
});
$(document).mousemove(function(e){
if (!mouseIsDown) return;
$('img').css({left:e.pageX, top:e.pageY});
}).mouseup(function(){
mouseIsDown = false;
});
I'll let you finalize in order to be more precise and use start drag position (hint : use offset). And you could also remove the mousemove event handler when the mouse button is up.
how can get x,y when mousedown in image and then mouse move in the image and then mouseup get x,y
(2 x,y 1-x,y when mouse down 2-x,y when mouse up)
all the event in the one image.
and language jquery
this my code by this not working(image stick to mouse and only mouse_d called)
var mx1;
var my1;
$("document").ready(function ()
{
$("img#ground").bind("mousedown",mouse_d);
$("img#ground").bind("mouseup",mouse_u);
$("img#ground").bind("dragstart",mouse_d);
});
function mouse_d(event)
{
mx1=event.pageX;
my1=event.pageY;
}
function mouse_u(e)
{
mx2=e.pageX;
my2=e.pageY;
mx2=mx1-mx2;
my2=my1-my2;
}
Are you trying to achieve a drag and drop effect?
if so this is the ultimate solution:
http://jqueryui.com/demos/draggable/
when using firefox is the isNS variable true? otherwise an mouseup event isn't set.