I am trying to make a div draggable using jQuery, but without jQuery UI, I can't figure out why I get an error if when I use the e.target.id, the value in this field at some point is empty or null.
If I hard code the Id in the function it works pretty well, what am I missing here?
I appreciate your help.
This is my code:
<div id="Div1" style="width: 100px; background-color: red">test</div>
$(document).ready(function () {
dragObject.init("Div1");
});
jQdrag.js
var dragObject = (function () {
var init = function (dragObj) {
addListeners(dragObj);
};
var addListeners = function (dragObj) {
document.getElementById(dragObj).addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
};
mouseDown = function (e) {
window.addEventListener('mousemove', divMove, true);
};
mouseUp = function () {
window.removeEventListener('mousemove', divMove, true);
};
divMove = function (e) {
debugger
//var div = document.getElementById("Div1");
var div = document.getElementById(e.target.id); //ERROR
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
};
return {
init: function (dragObj)
{
init(dragObj);
}
};
})();
Related
I'm using the script below (adapted from https://htmldom.dev/drag-to-scroll/) which enables a website to be scrolled by dragging it. Additionally, I remove the default draggability for links and images via css such that the page can be dragged when the cursor is currently positioned on these elements.
document.addEventListener('DOMContentLoaded', () => {
let dragging; const pos = {};
const onClick = (e) => {
if(!dragging)
return;
e.preventDefault(); // somehow does not work: why?
e.stopImmediatePropagation();
};
const onMouseMove = (e) => {
dragging = true;
window.scroll(0, pos.top - (e.clientY - pos.y));
};
const onMouseUp = (e) => {
dragging = false;
e.target.removeEventListener('mousemove', onMouseMove);
e.target.removeEventListener('mouseup', onMouseUp);
e.target.removeEventListener('click', onClick);
};
const onMouseDown = (e) => {
pos.top = window.scrollY;
pos.y = e.clientY;
e.target.addEventListener('mousemove', onMouseMove);
e.target.addEventListener('mouseup', onMouseUp);
e.target.addEventListener('click', onClick);
};
document.addEventListener('mousedown', onMouseDown);
});
a, img {
user-drag: none;
-webkit-user-drag: none;
}
<div style="height:200vh; background:lightblue; padding:1em;">
<h1>Drag to scroll me</h1>
Dragging this link should NOT open the website (but does)
</div>
Problem
Preventing the default action (opening the link) does not work somehow. How can it be canceled in case of dragging?
The solution was a bit more complex than I thought, perhaps someone else has a better one. It requires an additional global function preventClick which prevents the event default and propagation.
The rest of the code looks like this now:
$(() => {
/*
require 'preventClick()';
*/
//------------------------------------------------------------------------------------
// $
//------------------------------------------------------------------------------------
const
$body = $('body'),
$head = $('head')
;
//------------------------------------------------------------------------------------
// var
//------------------------------------------------------------------------------------
const
pos = {}
;
let
clone
;
//------------------------------------------------------------------------------------
// ()
//------------------------------------------------------------------------------------
const
//------------------------------------------
onMouseMove = (e) => {
//------------------------------------------
window.scroll(0, pos.top - (e.originalEvent.clientY - pos.y));
},
//------------------------------------------
onMouseUp = function(e){
//------------------------------------------
$body.css('cursor', 'grab');
$(this)
.off('mousemove', null, onMouseMove)
.off('mouseup', null, onMouseUp)
;
}
;
//------------------------------------------------------------------------------------
// Events
//------------------------------------------------------------------------------------
$(document)
//------------------------------------------
.mousedown(function(e){
//------------------------------------------
$body.css('cursor', 'grabbing');
pos.top = window.scrollY;
pos.y = e.originalEvent.clientY;
$(this)
.one('dragstart', function(e){
clone = $(e.target).clone(true);
$(e.target)
.attr('onclick', 'preventClick(event)')
.one('click', function(e){
$(this).attr('onclick', clone.attr('onclick') || '');
})
;
})
.mousemove(onMouseMove)
.mouseup(onMouseUp)
;
})
;
$body
//------------------------------------------
.css('cursor', 'grab')
//------------------------------------------
;
//------------------------------------------------------------------------------------
// >>
//------------------------------------------------------------------------------------
$head.append(`<style>
a, img {
user-drag: none;
-webkit-user-drag: none;
}
</style>`);
});
Textarea change needs to be detected onkeyup event when page is loading. Textarea resizing is working fine but textarea is not detected onkeyup event when page is loaded.I tried following code.
<script>
jQuery.each(jQuery('textarea[data-autoresize]'), function () {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function (el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function () {
resizeTextarea(this);
});
jQuery(this).trigger('keyup');
});
</script>
try by running your code in window.onload
window.onload=function(){
jQuery.each(jQuery('textarea[data-autoresize]'), function() {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function(el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function() {
resizeTextarea(this);
});
jQuery(this).trigger('keyup');
});
//trigger when modal showing
$('.modal').on('shown.bs.modal', function () {
jQuery('textarea[data-autoresize]').trigger('keyup');
})
}
fiddle here
You shall execute jquery once the doc has finished loading.
Wrap it like this:
<script>
$(document).ready(function(){
jQuery.each(jQuery('textarea[data-autoresize]'), function () {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function (el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function () {
resizeTextarea(this);
});
jQuery(this).trigger('keyup');
});
});
</script>
before i was trying to add this event listener to a div
i was using "scroll", this one works but "resize" is not working
and i can't find out why .
This is my code :
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
content.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
JSFIDDLE DEMO
or is it possible something like this :
$('document').ready(function(){
var content = document.getElementById("scroller");
var hc , h;
window.addEventListener('resize', function(event){
h = event.clientHeight;
if(h>510) {
$(".godown").fadeout("0");
}
if(h<510) {
content.addEventListener('scroll', function(event){
hc = $('#scroller').scrollTop();
if (hc){
$(".godown").fadeOut("slow");
$(".gotop").fadeIn("slow");
}
if (!hc){
$(".godown").fadeIn("slow");
$(".gotop").fadeOut("slow");
}
}, false);
}
}, false);
});
You need to add the event listener to the window object, as it is the window resizing, not the element. window.addEventListener("resize", function(event) {...});
I have updated your jsfiddle here where you can see it working.
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
window.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
I'm trying to make a sort of drag and drop puzzle website using uniform square images, and I've written the drag code to drag individual images by their <img> element.
However I noticed that while dragging an <img> element over another element with addEventListener("mousenter", function () {//code};) attached, the mouseenter event doesn't fire. If I move my mouse over the element without dragging the image, the event fires as normal.
Does anyone have any ideas on how to fix this problem? My only guess atm is that the <img> element is blocking the listener from seeing the mouse.
var dragImg = document.querySelector(".images img");
dragImg.addEventListener("mousedown", function () {
console.log("mousedown detected " + dragImg.clientHeight);
dragImg.setAttribute("id", "drag");
dragging = true;
});
dragImg.addEventListener("mousemove", function (event) {
if (dragging) {
dragImg.style.top = (event.clientY - dragImg.clientHeight/2) + "px";
dragImg.style.left = (event.clientX - dragImg.clientWidth/2) + "px";
}
});
dragImg.addEventListener("mouseup", function () {
console.log("mouseup detected");
dragging = false;
//reset position if not in clipboard
dragImg.removeAttribute("id");
dragImg.style.top = "";
dragImg.style.left = "";
});
//Clipboard behavior - This listener doesn't fire when dragging an img?
var clipboard = document.querySelector(".clipboard");
clipboard.addEventListener("mouseover", function () {
if (dragging) {
console.log("mouse entered clipboard!");
clipboard.style.backgroundColor = "red";
}
});
#drag {
position: absolute;
}
The problem is that the mouse never hover the .clipboard because the image always below the pointer.
The simple solution is to add pointer-events:none; (not supported on older browsers).
var dragImg = document.querySelector(".images img");
var dragging = false;
dragImg.addEventListener("mousedown", function (event) {
event.stopPropagation();
console.log("mousedown detected " + dragImg.clientHeight);
dragImg.setAttribute("id", "drag");
dragging = true;
document.addEventListener('mousedown', function documentMouseDown(){
if (dragging) {
dragImg.removeAttribute("id");
dragging = false;
document.removeEventListener('mousedown', documentMouseDown);
}
});
});
document.addEventListener("mousemove", function (event) {
if (dragging) {
dragImg.style.top = (event.clientY - dragImg.clientHeight/2) + "px";
dragImg.style.left = (event.clientX - dragImg.clientWidth/2) + "px";
}
});
dragImg.addEventListener("mouseup", function () {
console.log("mouseup detected");
dragging = false;
//reset position if not in clipboard
dragImg.removeAttribute("id");
dragImg.style.top = "";
dragImg.style.left = "";
});
//Clipboard behavior - This listener doesn't fire when dragging an img?
var clipboard = document.querySelector(".clipboard");
clipboard.addEventListener("mouseover", function () {
if (dragging) {
console.log("mouse entered clipboard!");
clipboard.style.backgroundColor = "red";
}
});
#drag {
position: absolute;
pointer-events:none;
}
.clipboard {
width:200px;
height:200px;
background:green;
}
img {
-webkit-user-select:none;
}
<div class="clipboard"></div>
<div class="images">
<img src="http://i.stack.imgur.com/NghNQ.jpg" />
</div>
http://jsbin.com/hugewi/edit?html,css,js
I have a little script running so i can scroll trough a div with the mousedown option. Unfortunately it resets on each click and i can't quite figure out why it is doing this.
<script>
$(function () {
var clicked = false, clickX;
$("#gallery").on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
}
});
</script>
I am assuming it has something to do with
clickX = e.pageX;
$('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
Why am I? because : "Returns the horizontal coordinate of the event relative to whole document."
So I am assuming it takes the original position when you click but it doesnt update when you actually scroll this. Anyone has a fix for this?
http://jsfiddle.net/fLr4d7kt/6/
We have fixed it like this :
$(function () {
var scroll = 0;
$(function () {
var clicked = false, clickX;
$("#gallery").on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
scroll = $('#gallery').scrollLeft();
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('#gallery').scrollLeft(scroll + (clickX - e.pageX));
}
});
});
js: http://jsfiddle.net/fLr4d7kt/10/