We Keep Coding

Changing cursor while dragging HTML element

I know there has been numerous similiar questions on stackoverflow, I've read several of them, but none provided there answers worked in my case. I want to change cursor while dragging HTML element. I tried this:
var startX = null;
var startY = null;
var element = document.getElementById('bla');
element.addEventListener('dragstart', onDragStart, true);
element.addEventListener('dragend', onDragEnd, true);
element.addEventListener('drag', onDrag, true);
function onDragStart(e){
startX = e.screenX;
startY = e.screenY;
e.target.style.cursor = "move";
}
function onDrag(e){
e.target.style.cursor = "move";
}
function onDragEnd(e){
var style = document.defaultView.getComputedStyle(element);
var newLeft = parseInt(style.left) + e.screenX - startX;
var newTop = parseInt(style.top) + e.screenY - startY;
e.target.style.left = newLeft + 'px';
e.target.style.top = newTop + 'px';
e.target.style.cursor = "default";
}
But it doesn't work. I have no idea why on earth e.target.style.cursor = "move" doesn't work. I tried changing it to document.body.style.cursor = "move", but it doesn't work either. Any help with solving this problem with explanation why my code doesn't work will be greatly appreciated.
JS Fiddle link: https://jsfiddle.net/4w20xxvp/59/
Ps. I'm looking for pure JS solution, no JQuery.
Ps2. I couldn't get answers from to work in my case. And I don't want to use custom cursor images, just standard css ones.

Try to preventDefault on the other drag events. Also, you might want to consider adding a drop target that would handle dragover events.
document.addEventListener('dragover', (e) => e.preventDefault(), true)
(Fiddle)

Resizing needs Refresh

So What I am trying to do is I have 3 div each div should scroll over the another div and when it reaches the top it's position should be fixed.
So everything is working fine until we resize the window(It needs refresh of page).
How to fix this ? I mean can't we do this without refreshing the page ?
I used resize but it's not working for me. And I'm not sure whether this is the right way of using resize
The JSFiddle copy of my work
var $cache = $('#two');
var $cache2=$('#three');
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= vTop) {
$cache.addClass('stuck');
$('#one').addClass('stuck');
$('#two h2').addClass('stuck');
} else if(y>=vTop2)
{
$('#two h2').removeClass('stuck');
}
else {
$cache.removeClass('stuck');
$('#one').removeClass('stuck');
$('#two h2').removeClass('stuck');
}
});

Use window.onresize to handle elements:
window.onresize = function(event) {
//handling code in between
}

Dragging a window by its components using Javascript

I have developed a Windows application using TideSDK with HTML , CSS and Javascript.To give it a widget look I disappered its title bar.So I can't drag it.The TideSDK documentation says "after disappearing title bars, you can drag window using its contents with javascript".
How can I drag the window with javascript selecting its components(tiles in my case)?Any tutorial or code as I found nothing on google with my search.
My App looks like below:

I've written the following generic function for dragging using JS:
function setDragOfElementOnAnother ($draggableElement, $draggedElememnt, allowDragPredicate) {
var stopDragFunction = function() {
$draggedElememnt.data("drag", false);
$draggedElememnt.removeData("startPoint");
$("html, body").unbind("mouseup.drag");
$("html, body").unbind("mousemove.drag");
};
var dragFunction = function(e) {
if (!parseBoolean($draggedElememnt.data("drag")))
return;
var begin = $draggedElememnt.data("startPoint");
$draggedElememnt.css({ left: e.clientX - begin.x, top: e.clientY - begin.y });
};
$draggableElement.mousedown(function(e) {
if ((e.clientX - $(this).offset().left < 0 || $(this).offset().left + $(this).width() < e.clientX) ||
e.clientY - $(this).offset().top < 0)
return;
if (allowDragPredicate && !allowDragPredicate(e))
return;
$draggedElememnt.data("drag", true);
$draggedElememnt.data("startPoint", Point(e.clientX - $(this).offset().left, e.clientY - $(this).offset().top));
$("html, body").bind("mouseup.drag", stopDragFunction);
$("html, body").bind("mousemove.drag", dragFunction);
});
$draggableElement.mouseup(stopDragFunction);
$draggableElement.mousemove(dragFunction);
}
This function is used to declare dragging of one element using another.
Prerequisites:
(1) The dragged element's position has to be either fixed or absolute (relative should also work). (2) jQuery.
By specifying both dragged and draggable elements as the same one, pressing on the element and moving the mouse will cause the element to drag.
The 'allowDragPredicate' variable is optional, and is useful to create boundaries.
EDIT: Forgot. Also add the code:
function Point(xVal, yVal) {
if (xVal === undefined) {
xVal = 0;
}
if (yVal === undefined) {
yVal = 0;
}
return {
x: xVal,
y: yVal
};
}
EDIT 2: And:
function parseBoolean(str) {
if (str === true)
return true;
if (str)
return /^true$/i.test(str);
return false;
}
EDIT 3: And, added a simple jsFiddle example.

vertical scrolling via scrollTo is jittery on mobile devices

I have seen this question but it wasn't answered.
I have a object on a webpage that I want you to be able to drag and scroll the page. Reason behind this is that I set it up to be a swipe'able window but on some mobile devices the window takes up most of the screen. So in addition to horizontal "swiping" I want you to be able to vertically scroll the page as well.
This works great on a PC with a mouse. Everything is smooth and as expected. However, once you go to a mobile device (I have tried on Safari on an iPhone and the native browser on an Android 4 and both have the same issue) vertical scrolling is very "jittery".
At first I thought that it had to do with the fact that after you scroll the page, the next touchmove / MSPointerMove event will return a Ycord that different even though your finger might not have moved (due to the scrolling). But trying to accomidate for this didn't help.
Anyway, a demo of the whole thing can be found at http://www.leecolpi.com/NEW/m/
The full javascript can be found at http://www.leecolpi.com/NEW/m/JAVASCRIPT/slide_window.js
The relivant javascript is (might be easier to read via the link above):
function mouseMoveTrigger(evt)
{
if (!isDragging) return;
if (!touchEvents && !pointerEvents)
if (window.event) evt=window.event;
if (evt.preventDefault)
evt.preventDefault();
else
evt.returnValue = false;
var newX;
var newY;
if (touchEvents)
{
newX = offsetX - evt.changedTouches[0].pageX;
offsetX = evt.changedTouches[0].pageX;
newY = offsetY - evt.changedTouches[0].pageY;
offsetY = evt.changedTouches[0].pageY;
}
else
{
newX = offsetX - evt.clientX;
offsetX = evt.clientX;
newY = offsetY - evt.clientY;
offsetY = evt.clientY;
}
var thingsToSlide = document.getElementById("pictureFrame").getElementsByTagName("li");
newX = parseInt(thingsToSlide[0].style.right.replace(/px/g,'')) + newX;
if (newX < 0)
newX = 0;
if (newX > ((thingsToSlide[0].offsetWidth * (thingsToSlide.length - 1))) + 30)
newX = (thingsToSlide[0].offsetWidth * (thingsToSlide.length - 1)) + 30;
window.scrollBy(0, newY);
for (var i=0; i<thingsToSlide.length; i++)
thingsToSlide[i].style.right = newX + "px";
return false;
}
As you can see, all I am doing is a scrollBy of the difference of the Yvalue for the current and previous "move" events. Again, this works like a champ on a computer which is exactly where I don't care if it works or not. Only problem is every mobile device I have tried it on.
I am using preventDefault() (or setting the return value = false if I can't do that), but could I be triggering another event and not knowing it? I tried with my init to only listen for certian events. Here is my init function (might be easier to read via the link above):
function initSlider()
{
var pageBody = document.getElementsByTagName("body")[0];
var thingsToSlide = document.getElementById("pictureFrame");
if (thingsToSlide)
{
var thingsToSlideList = document.getElementById("pictureFrame").getElementsByTagName("li");
for (var i=0; i<thingsToSlideList.length; i++)
thingsToSlideList[i].style.right = "0px";
if (touchEvents)
{
thingsToSlide.addEventListener("touchstart", onTouchStart, false);
}
else if (pointerEvents)
{
thingsToSlide.addEventListener("MSPointerDown", onTouchStart, false);
}
else
{
thingsToSlide.ondrag=function() { return false; };
thingsToSlide.onselectstart=function() { return false; };
thingsToSlide.onmousedown=function(event) { mouseDownTrigger(this,event); };
}
if (touchEvents)
{
pageBody.addEventListener("touchmove", mouseMoveTrigger, false);
pageBody.addEventListener("touchend", mouseUpTrigger, false);
pageBody.addEventListener("touchcancle", mouseUpTrigger, false);
}
else if (pointerEvents)
{
pageBody.addEventListener("MSPointerMove", mouseMoveTrigger, false);
pageBody.addEventListener("MSPointerUp", mouseUpTrigger, false);
pageBody.addEventListener("MSPointerCancel", mouseUpTrigger, false);
}
else
{
document.onmousemove = mouseMoveTrigger;
document.onmouseup = mouseUpTrigger;
}
}
}
Any help would be greatly appreciated. Thanks in advance

JavaScript how to check drag direction

I am trying to monitor dragStart and dragEvent javascript, in order to conclude its direction, UP or DOWN.
However i could not get any detail in arguments passed by the event -- that help to conclude.
Is there any better way to check drag direction , up or down?
Note:
my problem is specifically happening at mojo javascript at webos
Thanks,
-iwan

I didn't know about dragStart and dragEvent, but why not use onmousedown, onmousemove and onmouseup?
I made a modified version of http://dunnbypaul.net/js_mouse/. The direction is displayed in #status when you drag the image. Tested and works in IE5.5, IE6, IE7, IE8, Safari 5, Chrome 6 and Navigator 9. Works with Strict Doctype (probably other Doctypes also, didn't test them).
JavaScript:
var dragobj = null;
function getCurY(e) {
if (!e) e = window.event;
if (e.pageX || e.pageY)
return e.pageY;
else if (e.clientX || e.clientY)
return e.clientY + document.body.scrollTop;
}
function drag(context, e) {
dragobj = context;
document.onmousedown = function() { return false };
document.onmouseup = function() {
if (dragobj) dragobj = null;
document.getElementById('status').innerHTML = 'Direction: n/a';
}
var graby = getCurY(e);
var oriy = dragobj.offsetTop;
document.onmousemove = function(e) {
if (dragobj) {
dragobj.style.position = 'absolute';
var newy = oriy + getCurY(e) - graby;
var dir = newy > parseInt(dragobj.style.top, 10) ? 'down' : 'up';
dragobj.style.top = newy + 'px';
document.getElementById('status').innerHTML = 'Direction: ' + dir;
}
return false;
}
}
HTML:
<p onmousedown="drag(this, event)">
<img src="http://1.bp.blogspot.com/-u3FKHnFg8cA/Td56DmfliyI/AAAAAAAAAJ8/fTCFNCTs7iE/s1600/trollface%255B1%255D.jpg" alt="Trollface" />
</p>
<p id="status" style="position:absolute; top:0">Direction: n/a</p>

It won't tell you the direction, but you can get the position of the element you're dragging and figure out which direction it's going.
This might be helpful: http://dunnbypaul.net/js_mouse/.

You want to use dragOver. You could do something like this if you're only interested in vertical position:
Javascript:
<script type="text/javascript">
function getPosY(event) {
console.log(event.clientY);
}
</script>
HTML:
<body ondragover="getPosY(event)">
EDIT: Here's a jsfiddle. Make sure your js console is open.
You could have your function compare the clientY values to determine which direction the mouse is moving.