Develop Reference

Implement click and drag to rotate 3D object - vue.js

I have a button, which I click to activate the rotation function. After that, every time I hover over the object with the mouse, the object rotates as I want it to.
Now I want to change this and make the object rotate just by clicking it and moving the mouse (while still holding the mouse button). When I realease the mouse button I want it to stop rotating.
My code:
HTML:
<div class="model__3d" ref="panel3d">
<a class="button" #click.prevent="rotatemouse()">360</a>
Code js:
rotatemouse() {
document.querySelector('.model__3d').addEventListener('mousedown', () =>{
document.onmousemove = handleMouseMove;
});
//document.onmouseup = function () {
document.querySelector('.model__3d').addEventListener('mouseup', () =>{
document.onmousemove = null;
});
//function handleMouseMove(event) {
document.querySelector('.model__3d').addEventListener('mousemove', (event) =>{
let eventDoc, doc, body;
event = event || window.event;
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
if(maxX == 0){
maxX = event.pageX;
}
if(maxY == 0){
maxY = event.pageY;
}
if(event.pageX > maxX){
console.log("Right");
this.model.rotation.y = this.model.rotation.y + 0.08;
maxX = event.pageX;
}
else {
console.log("Left");
this.model.rotation.y = this.model.rotation.y - 0.08;
maxX = event.pageX;
}
if(event.pageY > maxY){
console.log("Up");
if(this.model.rotation.x < 0.32)
this.model.rotation.x = this.model.rotation.x + 0.08;
console.log(this.model.rotation.x);
maxY = event.pageY;
}
else {
console.log("Down");
if(this.model.rotation.x > -0.25)
this.model.rotation.x = this.model.rotation.x - 0.08;
console.log(this.model.rotation.x);
maxY = event.pageY;
}
});
}
Thanks!

You can have the desired behaviour by using a combination of
#mousemove, #mousedown, #mouseup
new Vue({
el: '#app',
data: {
captureToggle: false,
x: 0,
y: 0
},
methods: {
mo: function(evt) {
if (this.captureToggle) {
this.x = evt.x
this.y = evt.y
}
},
captureOn: function() {
this.captureToggle = true
},
captureOff: function() {
this.captureToggle = false
}
}
})
#app {
margin: 50px;
}
.mouseArea {
height: 100px;
width: 300px;
border: solid thin;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<div class="mouseArea" #mousedown="captureOn" #mouseup="captureOff" #mousemove="mo"></div>
<div>x : {{x}}</div>
<div>y : {{y}}</div>
</div>

after Jetpack Infinity Scroll js don't work

i have a wordpress page with jetpack infinity scroll and at all my posts is a youtubevideo at the first page befor the infinity scroll load page 2 and 3 work all great autoplay work for youtube and all this but when the infinity scroll work and load page 2 the video from youtube dont play more at this only the video from the first page what can i do my javascript for autoplay look like this:
window.onload=function(){
var LoadVideo = function(player_id){
var Program = {
Init: function(){
this.NewPlayer();
this.EventHandler();
},
NewPlayer: function(){
var _this = this;
this.Player = new YT.Player(player_id, {
events: {
'onStateChange': onPlayerStateChange,
}
});
_this.Player.$element = $('#' + player_id);
},
Play: function(){
if( this.Player.getPlayerState() === 1 ) return;
this.Player.playVideo();
},
Pause: function(){
if( this.Player.getPlayerState() === 2 ) return;
this.Player.pauseVideo();
},
ScrollControl: function(){
if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
else this.Pause();
},
EventHandler: function(){
var _this = this;
$(window).on('scroll', function(){
_this.ScrollControl();
});
}
};
var Utils = {
IsElementInViewport: function(el){
if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
};

Preparing for main Click and Touch Events

Trying to get the following code to work, a working example presented in jsfiddle will help. The codes for a game that should work on both click hardware and touchscreen hardware.
If there's a way to avoid using an init function that seems to help. Unless you feel like adding an example of how to get a draw function call into the mix somehow.
<p id="Xpos"></p>
<p id="Ypos"></p>
<script>
//############################### Mouse and Touch Events : Start
<!-- Source Code Web Site:
http://blog.patricktresp.de/2012/02/
internet-explorer-8-
and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/ -->
var el;
el = document.getElementById('bgLayerMain');
if( el.addEventListener )
{
el.addEventListener('mousedown', onMouseDown, false);
}else if( el.attachEvent ) {
el.attachEvent('onmousedown', onMouseDown);
}
if( is_touch_device() ) {addListeners(); alert("here");}
function stopEvent(e) {
if(!e) var e = window.event;
//e.cancelBubble is supported by IE -
// this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = false;
//e.stopPropagation works only in Firefox.
if ( e.stopPropagation ) e.stopPropagation();
if ( e.preventDefault ) e.preventDefault();
return false;
}
function addListeners( el )
{// Allow function call without passing parameters
var e = el;
if( !e ) e = document.getElementById('bgLayerMain');
var el = e;
if( el )
{
if( el.addEventListener )
{
el.addEventListener('mouseup', onMouseUp, true);
el.addEventListener('mousemove', onMouseMove, true);
el.addEventListener('touchstart', onTouchStart, true);
el.addEventListener('touchmove', onTouchMove, true);
el.addEventListener('touchend', onTouchEnd, true);
}else if( el.attachEvent ) {
// make sure mouse events have the prefix <strong>on</strong>
el.attachEvent('onmouseup', onMouseUp);
el.attachEvent('onmousemove', onMouseMove);
el.attachEvent('touchstart', onTouchStart);
el.attachEvent('touchmove', onTouchMove);
el.attachEvent('touchend', onTouchEnd);
}
}
}
// also remove the Listeners correctly:
function removeListeners( el ) {
var e = el;
if( !e ) e = document.getElementById('bgLayerMain');
var el = e;
if( el )
{
if( el.removeEventListener )
{
el.removeEventListener('mouseup', onMouseUp);
el.removeEventListener('mousemove', onMouseMove);
el.removeEventListener('touchstart', onTouchStart);
el.removeEventListener('touchmove', onTouchMove);
el.removeEventListener('touchend', onTouchEnd);
}else if( el.detachEvent ) {
el.detachEvent('onmouseup', onMouseUp);
el.detachEvent('onmousemove', onMouseMove);
el.detachEvent('touchstart', onTouchStart);
el.detachEvent('touchmove', onTouchMove);
el.detachEvent('touchend', onTouchEnd);
}
}
}
function onMouseDown(e) {
log('-> mouse down');
addListeners();
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
onTouchStart(e);
stopEvent(e);
}
function onTouchStart(e) {
log('-> touch start');
//do something with e.touches[0].clientX or e.touches[0].clientY
updateMousePos(e.touches[0].clientX,e.touches[0].clientY);
stopEvent(e);
}
function onMouseMove(e) {
log('-> mouse move');
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
onTouchMove(e);
stopEvent(e);
}
function onTouchMove(e) {
log('-> touch move');
//do something with e.touches[0].clientX or e.touches[0].clientY
updateMousePos(e.touches[0].clientX,e.touches[0].clientY);
stopEvent(e);
}
function onMouseUp(e) {
log('-> mouse up');
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
removeListeners();
stopEvent(e);
}
function onTouchEnd(e) {
log('-> touch end');
if( !is_touch_device() ) removeListeners();
}
function log(str) {
var c;
c = document.getElementById('console');
c.innerHTML = str + '
' + c.innerHTML;
}
function is_touch_device() {
return !!('ontouchstart' in window) ? 1 : 0;
}
function updateMousePos(){
//update posX and posY
}
//############################### Mouse and Touch Events : End

Simplified it to the following, perhaps a better way, yet for now works for me.
var clickOrTouchActive = 0;
addEventListener("mousedown", onClickOrTouchStart, false);
addEventListener("touchstart", onClickOrTouchStart, false);
addEventListener("mousemove", onClickOrTouchMove, false);
addEventListener("touchmove", onClickOrTouchMove, false);
addEventListener("mouseup", onClickOrTouchEnd, false);
addEventListener("touchend", onClickOrTouchEnd, false);
function onClickOrTouchStart(e) {
updateMousePos(e.pageX,e.pageY);
tileMouseClicked(e.pageX,e.pageY);
fAngleOfMotion(e.pageX,e.pageY);
clickOrTouchActive = 1;
e.preventDefault();
return false;
}// end function onClickOrTouchStart
function onClickOrTouchMove(e) {
if (clickOrTouchActive == 1){
updateMousePos(e.pageX,e.pageY);
tileMouseClicked(e.pageX,e.pageY);
fAngleOfMotion(e.pageX,e.pageY);
}
e.preventDefault();
return false;
}//end function onClickOrTouchMove
function onClickOrTouchEnd(e) {
updateMousePos(e.pageX,e.pageY);
tileMouseClicked(e.pageX,e.pageY);
fAngleOfMotion(e.pageX,e.pageY);
clickOrTouchActive = 0;
e.preventDefault();
return false;
}// end function onClickOrTouchEnd

Horizontal scrolling of a div using mouse and touch

Let's say I have a white-space: nowrap; div with overflow: hidden;. Its content is, of course, much longer than the div is, and needs to be scrolled to get revealed.
I was using this library, but it does not work for mobile devices with touch input. Do you know any alternative or ways to implement this feature?

Finally, my wish is fullfilled. Here I modified dragscroll.js library to enable touch support.
/* Modified dragscroll.js by Undust4able */
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports'], factory);
} else if (typeof exports !== 'undefined') {
factory(exports);
} else {
factory((root.dragscroll = {}));
}
}(this, function (exports) {
var _window = window;
var _document = document;
var mousemove = 'mousemove';
var mouseup = 'mouseup';
var mousedown = 'mousedown';
var touchmove = 'touchmove';
var touchup = 'touchend';
var touchdown = 'touchstart';
var EventListener = 'EventListener';
var addEventListener = 'add'+EventListener;
var removeEventListener = 'remove'+EventListener;
var dragged = [];
var reset = function(i, el) {
for (i = 0; i < dragged.length;) {
el = dragged[i++];
el = el.container || el;
el[removeEventListener](mousedown, el.md, 0);
_window[removeEventListener](mouseup, el.mu, 0);
_window[removeEventListener](mousemove, el.mm, 0);
el[removeEventListener](touchdown, el.td, 0);
_window[removeEventListener](touchup, el.tu, 0);
_window[removeEventListener](touchmove, el.tm, 0);
}
// cloning into array since HTMLCollection is updated dynamically
dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
for (i = 0; i < dragged.length;) {
(function(el, lastClientX, lastClientY, pushed, scroller, cont){
(cont = el.container || el)[addEventListener](
mousedown,
cont.md = function(e) {
if (!el.hasAttribute('nochilddrag') ||
_document.elementFromPoint(
e.pageX, e.pageY
) == cont
) {
pushed = 1;
lastClientX = e.clientX;
lastClientY = e.clientY;
e.preventDefault();
}
}, 0
);
(cont = el.container || el)[addEventListener](
touchdown,
cont.td = function(e) {
if (!el.hasAttribute('nochilddrag') ||
_document.elementFromPoint(
e.pageX, e.pageY
) == cont
) {
pushed = 1;
e.preventDefault();
e = e.targetTouches[0];
lastClientX = e.clientX;
lastClientY = e.clientY;
}
}, 0
);
_window[addEventListener](
mouseup, cont.mu = function() {pushed = 0;}, 0
);
_window[addEventListener](
touchup, cont.tu = function() {pushed = 0;}, 0
);
_window[addEventListener](
mousemove,
cont.mm = function(e) {
if (pushed) {
(scroller = el.scroller||el).scrollLeft -=
(- lastClientX + (lastClientX=e.clientX));
scroller.scrollTop -=
(- lastClientY + (lastClientY=e.clientY));
}
}, 0
);
_window[addEventListener](
touchmove,
cont.tm = function(e) {
if (pushed) {
e = e.targetTouches[0];
(scroller = el.scroller||el).scrollLeft -=
(- lastClientX + (lastClientX=e.clientX));
scroller.scrollTop -=
(- lastClientY + (lastClientY=e.clientY));
}
}, 0
);
})(dragged[i++]);
}
}
if (_document.readyState == 'complete') {
reset();
} else {
_window[addEventListener]('load', reset, 0);
}
exports.reset = reset;
}));

Make a container div with overflow-y: hidden;overflow-x: scroll; and set it to whatever pre-determined height you want.
Then have your inner div that will house the content set to position:absolute; and set its width to whatever size you need the accommodate your content.
The content will scroll with the mouse and by touch.
Sounds kinda like you're going for a netflix style side scroller - check out this codepen I've done up that shows what I was just talking about.
http://codepen.io/hoonin_hooligan/pen/aZBxRG

Prevent page scrolling while scrolling a div element

I have already found the solution in the accepted answer here:
How to prevent page scrolling when scrolling a DIV element?
But want also to disable scrolling the main page on keys (when div content can't be scrollable anymore).
I'm trying to make something like this but it's not working:
$( '.div-scroll' ).bind( 'keydown mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
e.preventDefault();
});
Any ideas why?

You can stop the scrolling of the whole page by doing:
Method 1
<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>
but it makes the browser's scrollbar disappear whenever you hover over the div.
Method 2
Else you can look at jquery-mousewheel.
var toolbox = $('#toolbox'),
height = toolbox.height(),
scrollHeight = toolbox.get(0).scrollHeight;
toolbox.off("mousewheel").on("mousewheel", function (event) {
var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
return !blockScrolling;
});
DEMO
Method 3
To stop the propagation with no plugins.
HTML
<div class="Scrollable">
<!-- A bunch of HTML here which will create scrolling -->
</div>
JS
$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});
Method 4
you can do it by canceling these interaction events:
Mouse & Touch scroll and Buttons associated with scrolling.
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}

You need to bind document to 'keydown' event like this:
$( document ).bind( 'keydown', function (e) { ... e.preventDefault(); }

This code block the scrolling by using keys:
$(document).keydown(function(e) {
if (e.keyCode === 32 || e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) {
return false;
}
});