jQueryUI draggable element loses containment - javascript

I have a little thumbnail that represents all the window. You can move div#maquetaPant and the window should to scroll at the same time you move the little square.
It's easier If you try:
http://www.noteboardapp.com/boarddemo
Drag the little square on the mini map on top right.
The code is here. If I put the function "dragMaqueta" in the stop event, then it works well. But I want it in the drag event to scroll the window at the same time of dragging the square. But if you try you'll see that doesn't work. It seems that window.scrollTo(scrollX,scrollY) moves the square outside the container.
<div id="canvasDiv">
<canvas id="canvas" width="125" height="100"></canvas>
<div id="maquetaPant"></div>
</div>
#maquetaPant
{
position: absolute;
}
$("#maquetaPant").draggable({containment: '#canvasDiv',drag: dragMaqueta});
function dragMaqueta(evt,ui)
{
var scrollX = parseInt(ui.position.left / $('#canvasDiv').width() * $('.Postits').width());
var scrollY = parseInt(ui.position.top / $('#canvasDiv').height() * $('.Postits').height());
window.scrollTo(scrollX,scrollY);
}
Do you know how to solve it?
Thank you!

Related

Hold and swipe (mousemove + click) causes screen to jump

I'm trying to incorporate a simple hold-and-move-mouse gesture.
I created a div holding some images by using a grid. When I use the mousemove event and detecting a click to move the pictures I'm getting the position of the mouse to change the scrollLeft of the scroller. But then the scroller jumps to the position.
A screen grab of how this looks:
https://i.imgur.com/db7ZmNy.gif
Is there a way to get start the scroller on a relative position of the mouse? And not the exact position, causing it to jump?
Here is (a summary of) my code:
<div class="scroller">
<div class="scroller-item">
<img src="[IMAGE]">
</div>
<div class="scroller-item">
<img src="[IMAGE]">
</div>
(...)
</div>
// Mousemove
var scroller = $('.scroller');
$(scroller).mousemove(function(e) {
// Getting mouse click
if (e.buttons == 1) {
// Getting position of mouse
var pos = e.pageX;
// Setting position of scroller
$(scroller).scrollLeft(pos);
}
});
Thank you!

Determine scrolled distance on the webpage for Paper.js synchronized scrolling of the view

I have an absolutely positioned canvas laid over a webpage. The canvas has some items created using Paper.js. I want the canvas (or the view) to move in sync with the scrolling of the webpage.
The canvas covers the entire screen (1920 x 1080) not the webpage (1920 x variable length). So, just shifting the canvas's fixed position does not work. It is no longer overlaid on the entire screen.
Later, I found about views in Paper.js and I can use the following line to scroll the view:
project.view.scrollBy(new Point(0, 450));
The problem is that I cannot figure out the value I need to put in place for 450 so that the scrolling is always synchronized.
I do use the following JavaScript to animate the scrolling action on the webpage whenver up and down keys are pressed:
$("section.scrollable").animate({scrollTop : $("section.scrollable").scrollTop() + 300 })
However, putting 300 in the scrollBy values doesn't move the canvas and the webpage in proper synchronization either.
This pen is a very minimal example to show my problem. You might prefer to see it in debug mode.
You can drag over the canvas to create orange lines.
There are three heading and three corresponding lines drawn on an overlaid canvas. The canvas is 1920px wide and 1080px high.
The third heading falls below 1080px so its line is not visible on the canvas. However, it becomes visible when I scroll inside the Paper view by using the following line:
project.view.scrollBy(new Point(0, 600));
Here is my problem with following constraints:
The canvas position has to stay fixed. So, it won't scroll with the rest of the document.
However, the view for Paper.js has to shift in sync with the document so that the lines, paths and other items don't change their relative positions with respect to the webpage. For example, the lines still stay under the same headings.
You need to listen to scroll event and every time it happens, update your paper.js scene y position.
Rather than using the view, I found that using the active layer was more convenient but you could theoretically do the same with the view.
Here's a simple fiddle that should get you on the track.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://unpkg.com/acorn"></script>
<script src="https://unpkg.com/paper"></script>
<style>
html,
body {
margin : 0;
height : 100%;
}
canvas {
position : fixed;
top : 0;
left : 0;
width : 100vw;
height : 100vh;
}
section {
max-width : 500px;
margin : auto;
}
</style>
</head>
<body>
<section>
<div>
<h1>title 1</h1>
<p>...</p>
</div>
<div>
<h1>title 2</h1>
<p>...</p>
</div>
</section>
<canvas id="canvas" resize></canvas>
<script>
paper.setup('canvas');
new paper.Path.Circle({
center: paper.view.center,
radius: 50,
fillColor: 'orange'
});
const originalY = paper.view.center.y;
const update = () => {
const yOffset = document.scrollingElement.scrollTop;
paper.view.center.y = originalY - yOffset;
};
window.addEventListener('scroll', update);
</script>
</body>
</html>

How can I create a draggable scrollbar that manipulates the viewport using javascript?

I'm trying to create a web page that has a slider at the bottom of the page, that can be dragged from left to right to shift the viewport. I've tried to draw a simple diagram of what I'm trying to achieve here:
The red box is the draggable slider. The user should be able to drag this red box from side to side and this should correspond with the image in the main viewport. Are there any plugins available for this?
At the moment I'm considering using the jquery-ui draggable plugin to handle the slider, but I'm not sure how to manipulate the viewport?
I'm thinking that maybe I could capture the distance moved by the slider and then apply a multiplier to that value to get the move the viewport by the correct amount but I'm not sure if this is a sensible idea?
What would be the best way to achieve this?
Thanks
You could start from the jQuery UI slider for the scroll bar at the bottom.
Modify it to fit your needs (little bit of css tweaking)
With the $('.viewport')[0].scrollLeft = xpos method you can scroll to the right x position.
Here is an example: http://jsfiddle.net/Vandeplas/zAJtL/
js:
var percentage = 50;
$('.scrollTo').click(function(){
var vp = $('.viewport')[0];
vp.scrollLeft = (percentage / 100) * vp.scrollWidth;
console.log(vp.scrollWidth);
});
css:
.viewport {
width: 200px;
height: 40px;
overflow: auto; /* set to hidden to hide the default scrollbar*/
}
html:
<div class="viewport"> azertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwerty </div>
<input class="scrollTo" type="button" value="scroll"/>
UPDATE: With slider: http://jsfiddle.net/Vandeplas/zAJtL/1/
In case anyone was wondering, I managed to find the solution using this as a base: http://jeffschuette.com/2011/05/02/jquery-ui-slider-tutorial/
Hopefully it'll help anyone else trying to achieve the same thing!

Picture follow a mouse in a <div>

How can I make a picture follow the mouse in a specific <div>?
I know that I can get the mouse position from e.pageX & e.pageY and with the code document.onmousemove = followmouse;. Run the followmouse function every moment the mouse move in a page and in the followmouse function, set the picture position to the mouse position. For the exact question I asked here (how can I make a picture follow the mouse in a specific <div>), I have this idea:
Get my div top, left, width, and height and do some math and if mouse go out of the div, set visibility:hidden for the picture.
But isn't there any simple way to do this?
Let's assume you have some HTML like this,
<div id="mydiv" style="width: 300px; height: 300px;"></div>
<img id="myimg" style="position: absolute;" alt="" />
then
document.getElementById("mydiv").onmousemove = function(e) {
document.getElementById("myimg").style.top = e.pageY*1 + 5 + "px";
document.getElementById("myimg").style.left = e.pageX*1 + 5 + "px";
}
would move your picture to the mouse only if the mouse is over the div.
So long as the picture is actually contained in the div and you move it relative to its normal position, then I think setting overflow:hidden on the containing div should work. When I say "setting", I don't mean every time the mouse moves outside, but just once in the main CSS.

HTML5 Drag and Drop

I've been having trouble coming up with a way of making a drag and drop area on a web page. I have multiple resizable <div>s, and I want to be able to drag these anywhere. Think of it like dragging desktop icons around the desktop and placing them anywhere. It would be nice if I could add buttons to these <div>s to change their z-indexes and have them overlap. Would this require use of <canvas>? I am currently using <section> for the drag area.
Thanks!
If you want to do the drag-n-drop yourself, you may want to have one div enclosing the draggable div, so you can use the top of the larger div as the draggable area.
So, you have
<div id='draggablediv' style='backgroundcolor: blue;'>
<div class='draggable' style='position: relative; top: 5em; left: 0em;'>...
</div></div>
This code is purely for example, won't work, btw.
So, on the draggablediv you would put an onclick event handler, and this would start an onmousemove handler and onmouseup handler. The last one is to drop, but you may also want to have onblur in case the mouse moves outside of the browser.
Then, as the mouse moves, just reposition the div, so these divs would need to be absolute positioned, or relative positioned (absolute would be easier).
It is important to remove the event handlers by setting them to null when the mouse button is released.
If not in a droppable area then make certain to put the div back where it started, so you will want a closure so you can remember the original top/left coordinates of the div.
You will want to get familiar with this functionality:
(function g(someval) {
var a = someval;
return h() {
}
})(origval);
For an example search for getImgInPositionedDivHtml in http://jibbering.com/faq/notes/closures/
In order to change the z-index you may want to have a +/- in the div and when that is clicked on the z-index is changed.
Here is a page that talks about changing the z-index.
http://msdn.microsoft.com/en-us/library/ms533005(v=vs.85).aspx
I don't think you can do that with HTML-Only, however this is some example of how you could do it with javascript:
<html>
<head>
<style>
.draggable {
position: absolute;
cursor: default;
background-color: purple;
top: 0px;
left: 0px;
}
</style>
</body>
<body onmouseup="stopMovement()">
<div id="draggable" class="draggable" onmousedown="startMovement(event)">
Drag me around :D
</div>
<script>
var drg = document.getElementById("draggable");
var xDisplacement = 0;
var yDisplacement = 0;
function startMovement(e) {
xDisplacement = e.pageX - getComputedStyle(drg).left.substring(0, getComputedStyle(drg).left.length - 2);
yDisplacement = e.pageY - getComputedStyle(drg).top.substring(0, getComputedStyle(drg).top.length - 2);
document.body.onmousemove = moveDraggable;
}
function stopMovement() {
document.body.onmousemove = null;
}
function moveDraggable(e) {
drg.style.top = e.pageY - yDisplacement;
drg.style.left = e.pageX - xDisplacement;
}
</script>
</body>
</html>

Categories