I'm trying to see how drag & drop works in native javascript. I'm writing a simple javascript function to make it happen. It works, but not correctly.
http://jsfiddle.net/FKM5S/
when you move the white box slowly towards the black box, the white box stops as designed. When you move the white box fast enough, it actually overlaps the black box.
In my javascript code, I check if the white box overlaps the black box then return false.
var beforeMovePassed = this.callbacks.beforeMove();
if( beforeMovePassed )
{
return false;
}
I'm not exactly sure why it's happening.
How do i stop the event correctly so that the white box doesn't overlap the black box regardless of your dragging speed?
Notice that event handler is called not for every change, there is some limit in ms between callings and it depends on many factors.
So for you will be good just each time check is white box are righter the black box, and if it is so, then move it by your self to the correct position.
I am not sure
But try using event.preventDefault() in that case you must have the reference of event object.
Hope it will work!!
Related
Consider the following example as displayed on Windows in the Chrome browser.
<input type="range">
It produces a range slider. I have found that if I first use my mouse and
Mouse down slightly below the range slider
With mouse button still pressed move mouse across the range slider to top of it
Release mouse
I can make the range slider stop functioning as expected. It displays a "circle with a line through it" cursor and refuses to allow me to slide the handle to the right or left.
My theory here is that the first actions I take "select" or "highlight" the range selector, as one would select a section of text in the browser, and then my subsequent attempts to operate the range slider are interpreted as me wanting to drag the selection.
Is there any work-around or way to avoid this bug?
So far attempts such as setting css user-select: none; on the input element do not work, neither does calling e.preventDefault() on the drag event.
See effect in GIF:
After a little tinkering I was able to stop this behavior with the following JS:
document.querySelectorAll('input[type="range"]').forEach((input) => {
input.addEventListener('mousedown', () => window.getSelection().removeAllRanges());
});
I am trying to create my own text selection with DOM-elements. Yes, I mean the blue background you see behind the text when you select it in this element. The idea is to halt the default behavior (the blue color) and use my own elements to do the job by finding the xy-position of the selection and then placing absolute positioned elements. I want to be able to do this with a regular div.
I'm thinking I need 3 elements. One for the top row (which may be incomplete), one for the middle chunk, one for the last (same as top). Here's an image that helps you understand:
I've been thinking of catching mouseup/down and then mousemove and then check window.getSelection() but so far I'm having trouble getting anywhere.
Using the CSS ::selection will not work because the element will not have focus.
I appreciate all help I can get! Thanks in advance.
Edit:
Stumbled upon https://code.google.com/p/rangy/ which might be of help? Anyone with experience with this plugin?
Edit2:
Cross-browser support is required.
You can use getClientRnge:
var element = document.getElementById('element')
element.onmouseup = function(){
var selection = document.getSelection(),
range = selection.getRangeAt(0),
clientRects = range.getClientRects()
console.log(clientRects)
}
http://jsfiddle.net/XjHtG/
This will return the left, right, top, bottom, width and height of all selections made.
How stop draggable JcanvaScript library?
For example a picture, in cases when drag-and-drop goes beyond the canvas element and I don't want to allow pictures to go beyond it.
jc('#img1').draggable({
drag: function(){
point=jc('#img1').position();
if(point.x<0){
//here stop draggable image
//these options don't work
//this.draggable('pause');
//return;
//jc.pause();
}
}
});
Wow! This was actually a really horrible problem. What makes it really horrible is that JCanvasScript doesn't fire onRelaseOutside events.
I've posted a solution here: http://jsfiddle.net/qpuGw/
You will not be able to drag the circle closer that 100px from the left-hand side.
The gist is:
If your object moves outside of a bounding box: (a) set clone it and (b) set it to invisible.
If your object moves back inside your bounding box: (a) delete the clone and (b) set your object to visible again
If the user releases the object: do the same as (2) above.
Good luck!
Interesting glitch. It turns out that if you try to use CSS to style the cursor (as in to hide or use a crosshair cursor), when you fire an onmousedown event, the cursor is changed to a text cursor.
Here's a code snippet from the Experiment where I noticed this:
mouse=[[0,0],false];
snap_mouse_by=10;
canvas.onmousedown=function(evt){
var X=evt.clientX,Y=evt.clientY;
mouse[0]=[X-X%snap_mouse_by,Y%Y-snap_mouse_by];
//set mouse coordinates
mouse[1]=true;
//set mouse is down to true
}
Along with this, a self-executing function runs and checks for the mouse coordinates and whether the mouse is down or not. Based on this data, it draws a box.
Of course, when I hit the mouse button, the cursor's style goes to text instead of doing nothing.
No need to answer this question, answer is below.
I did a quick google search to see if I was doing the CSS wrong, or if there's a documented bug.
I found nothing, but then got an idea that should seem pretty obvious.
canvas.onmousedown=function(evt){
...
evt.preventDefault();
return false;
}
I tested that out to see if it was a browser function causing the CSS inconsistency, and it worked like a charm, I now have full control of the cursor's style.
Here's the link, if anyone's curious.
Just thought I'd share this in case anyone else runs into this glitch.
I've been working on making a change to the jQuery add-on tooltipsy so that it locks on-to the mouse.
Getting it to do this is a simple task, all you have to do is change the showEvent to 'mousemove' however, because that is the show event, every time you move the mouse it has to redo the entire tooltipsy function for every pixel you moved, so the box doesn't keep up properly with the mouse.
Also, because of a problem with the lagging box and mouseleave, the box doesn't usually hide properly on mouseleave (because the function as to be run for every pixel your mouse moves so it's still computing after you mouseout)
This problem would ordinarily be easy to solve. All you would have to do is split the show hide and move into three different events. (mouseenter, mouseleave, and mousemove respectively) however, getting this to work in the context of tooltipsy is a much more complicated matter.
Here is the example:
http://jsfiddle.net/MarkKramer/HwpEs/2/
Notice how on the third div I got it to follow the cursor, but it is using mousemove as the showEvent, when really mousemove should only be used to get the coordinates of the tooltips.
If someone can solve this I will be very grateful.
Update: I tried putting if alignTo = cursor in a mousemove, which would work except that the function messes with the variable's scope.
That plugin seems to be way too complicated if you want basic tooltip behavior.
The code for a tooltip like that is quite simple:
$('#tooltip-container').mousemove(function(e) {
$('#tooltip').css('left', e.pageX + 20);
$('#tooltip').css('top', e.pageY + 20);
});
$('#tooltip-container').mouseleave(function() {
$('#tooltip').hide();
});
$('#tooltip-container').mouseenter(function() {
$('#tooltip').show();
});
If you want a live demo, here ya go: http://jsfiddle.net/DR4Wv/6/