JQuery Draggable: make container move horizontaly + document move verticaly
0
I'm building a draggable content on mobile devices using jQueryUI.
I designed this draggable content in order to only slide horizontally and added limits for the content not to scroll out of its container. This works fine.
I would also like user to be able to drag vertically in order the whole document to scroll up and done, following the user gesture. I'm trying to use $('body').scrollTop() without success: drags horizontally the right way, do not move at all vertically.
Could you please help me?
Code pen is here: https://codepen.io/MaxAurray/pen/Krawxj
HTML:
<html>
<head></head>
<body>
<!-- DEBUG FRAME -->
<div class="debug">
<div class="body"></div>
<div class="drag"></div>
</div>
<!-- DUMMY CONTENT -->
<div class="content">Dummy content</div>
<!-- INTERESTING PART -->
<div class="container">
<h2>Beautiful images</h2>
<h3>(drag left and right)</h3>
<div class="draggable">
<div class="card">
<img src="https://picsum.photos/200/150/?random1">
<h3>Image 1</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random2">
<h3>Image 2</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random3">
<h3>Image 3</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random4">
<h3>Image 4</h3>
</div>
</div>
</div>
<!-- DUMMY CONTENT -->
<div class="content">Dummy content</div>
</body>
</html>
CSS :
body
margin: 50px;
.debug
position:fixed;
top:0;
right:0;
width:200px;
height:100px;
border:1px blue dashed;
.content
display:flex;
justify-content: center;
align-items:center;
background-color:rgba(0,0,0,0.2);
width:500px;
height:300px;
font-style: italic;
.container
width:500px;
background-color:rgba(255,0,0,0.2);
overflow-x:hidden;
h2,h3
text-align:center;
.draggable
background-color:rgba(0,255,0,0.2);
padding:20px 0;
display: flex;
width:(66% * 4);
justify-content: space-between;
.card
width: 100%;
border:1px rgba(0,0,255,0.2) dashed;
background-color:rgba(0,0,255,0.2);
text-align:center;
img
width:200px;
height:150px;
JavaScript:
/*
This code pen imports:
- jQuery,
- jQuery UI,
- jQueryUI-Touch-Punch
*/
$(document).ready(function()
$(".draggable").draggable(
// Save body position at drag begin
start: function(event, ui)
$("body").data("top", $("body").scrollTop());
,
drag: function(event, ui)
// Debug display
$(".debug .body").text("BODY - ScrollTop: " + (parseInt($("body").data("top")) - ui.position.top));
$(".debug .drag").text(
"DRAG - Top:" + ui.position.top + " / Left: " + ui.position.left
);
// Move body vertically, relative to drag position
$("body").scrollTop(parseInt($("body").data("top")) - ui.position.top);
// Get card width
var intDivLength = $(this)
.find("div:first-child")
.outerWidth();
// Do not allow to go left after first image
if (ui.position.left > 0)
ui.position.left = 0;
else if (
// Do not allow to go right after last image
ui.position.left <
-4 * intDivLength +
$(this)
.closest(".container")
.innerWidth()
)
ui.position.left =
-4 * intDivLength +
$(this)
.closest(".container")
.innerWidth();
// Force move on x axys.
ui.position.top = 0;
,
scroll: false
);
);
jquery scroll draggable jquery-ui-draggable
asked Nov 13 '18 at 8:10
MaxAurayMaxAuray
3651314
add a comment |
0
I'm building a draggable content on mobile devices using jQueryUI.
I designed this draggable content in order to only slide horizontally and added limits for the content not to scroll out of its container. This works fine.
I would also like user to be able to drag vertically in order the whole document to scroll up and done, following the user gesture. I'm trying to use $('body').scrollTop() without success: drags horizontally the right way, do not move at all vertically.
Could you please help me?
Code pen is here: https://codepen.io/MaxAurray/pen/Krawxj
HTML:
<html>
<head></head>
<body>
<!-- DEBUG FRAME -->
<div class="debug">
<div class="body"></div>
<div class="drag"></div>
</div>
<!-- DUMMY CONTENT -->
<div class="content">Dummy content</div>
<!-- INTERESTING PART -->
<div class="container">
<h2>Beautiful images</h2>
<h3>(drag left and right)</h3>
<div class="draggable">
<div class="card">
<img src="https://picsum.photos/200/150/?random1">
<h3>Image 1</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random2">
<h3>Image 2</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random3">
<h3>Image 3</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random4">
<h3>Image 4</h3>
</div>
</div>
</div>
<!-- DUMMY CONTENT -->
<div class="content">Dummy content</div>
</body>
</html>
CSS :
body
margin: 50px;
.debug
position:fixed;
top:0;
right:0;
width:200px;
height:100px;
border:1px blue dashed;
.content
display:flex;
justify-content: center;
align-items:center;
background-color:rgba(0,0,0,0.2);
width:500px;
height:300px;
font-style: italic;
.container
width:500px;
background-color:rgba(255,0,0,0.2);
overflow-x:hidden;
h2,h3
text-align:center;
.draggable
background-color:rgba(0,255,0,0.2);
padding:20px 0;
display: flex;
width:(66% * 4);
justify-content: space-between;
.card
width: 100%;
border:1px rgba(0,0,255,0.2) dashed;
background-color:rgba(0,0,255,0.2);
text-align:center;
img
width:200px;
height:150px;
JavaScript:
/*
This code pen imports:
- jQuery,
- jQuery UI,
- jQueryUI-Touch-Punch
*/
$(document).ready(function()
$(".draggable").draggable(
// Save body position at drag begin
start: function(event, ui)
$("body").data("top", $("body").scrollTop());
,
drag: function(event, ui)
// Debug display
$(".debug .body").text("BODY - ScrollTop: " + (parseInt($("body").data("top")) - ui.position.top));
$(".debug .drag").text(
"DRAG - Top:" + ui.position.top + " / Left: " + ui.position.left
);
// Move body vertically, relative to drag position
$("body").scrollTop(parseInt($("body").data("top")) - ui.position.top);
// Get card width
var intDivLength = $(this)
.find("div:first-child")
.outerWidth();
// Do not allow to go left after first image
if (ui.position.left > 0)
ui.position.left = 0;
else if (
// Do not allow to go right after last image
ui.position.left <
-4 * intDivLength +
$(this)
.closest(".container")
.innerWidth()
)
ui.position.left =
-4 * intDivLength +
$(this)
.closest(".container")
.innerWidth();
// Force move on x axys.
ui.position.top = 0;
,
scroll: false
);
);
jquery scroll draggable jquery-ui-draggable
asked Nov 13 '18 at 8:10
MaxAurayMaxAuray
3651314
add a comment |
0
0
0
I'm building a draggable content on mobile devices using jQueryUI.
I designed this draggable content in order to only slide horizontally and added limits for the content not to scroll out of its container. This works fine.
I would also like user to be able to drag vertically in order the whole document to scroll up and done, following the user gesture. I'm trying to use $('body').scrollTop() without success: drags horizontally the right way, do not move at all vertically.
Could you please help me?
Code pen is here: https://codepen.io/MaxAurray/pen/Krawxj
HTML:
<html>
<head></head>
<body>
<!-- DEBUG FRAME -->
<div class="debug">
<div class="body"></div>
<div class="drag"></div>
</div>
<!-- DUMMY CONTENT -->
<div class="content">Dummy content</div>
<!-- INTERESTING PART -->
<div class="container">
<h2>Beautiful images</h2>
<h3>(drag left and right)</h3>
<div class="draggable">
<div class="card">
<img src="https://picsum.photos/200/150/?random1">
<h3>Image 1</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random2">
<h3>Image 2</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random3">
<h3>Image 3</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random4">
<h3>Image 4</h3>
</div>
</div>
</div>
<!-- DUMMY CONTENT -->
<div class="content">Dummy content</div>
</body>
</html>
CSS :
body
margin: 50px;
.debug
position:fixed;
top:0;
right:0;
width:200px;
height:100px;
border:1px blue dashed;
.content
display:flex;
justify-content: center;
align-items:center;
background-color:rgba(0,0,0,0.2);
width:500px;
height:300px;
font-style: italic;
.container
width:500px;
background-color:rgba(255,0,0,0.2);
overflow-x:hidden;
h2,h3
text-align:center;
.draggable
background-color:rgba(0,255,0,0.2);
padding:20px 0;
display: flex;
width:(66% * 4);
justify-content: space-between;
.card
width: 100%;
border:1px rgba(0,0,255,0.2) dashed;
background-color:rgba(0,0,255,0.2);
text-align:center;
img
width:200px;
height:150px;
JavaScript:
/*
This code pen imports:
- jQuery,
- jQuery UI,
- jQueryUI-Touch-Punch
*/
$(document).ready(function()
$(".draggable").draggable(
// Save body position at drag begin
start: function(event, ui)
$("body").data("top", $("body").scrollTop());
,
drag: function(event, ui)
// Debug display
$(".debug .body").text("BODY - ScrollTop: " + (parseInt($("body").data("top")) - ui.position.top));
$(".debug .drag").text(
"DRAG - Top:" + ui.position.top + " / Left: " + ui.position.left
);
// Move body vertically, relative to drag position
$("body").scrollTop(parseInt($("body").data("top")) - ui.position.top);
// Get card width
var intDivLength = $(this)
.find("div:first-child")
.outerWidth();
// Do not allow to go left after first image
if (ui.position.left > 0)
ui.position.left = 0;
else if (
// Do not allow to go right after last image
ui.position.left <
-4 * intDivLength +
$(this)
.closest(".container")
.innerWidth()
)
ui.position.left =
-4 * intDivLength +
$(this)
.closest(".container")
.innerWidth();
// Force move on x axys.
ui.position.top = 0;
,
scroll: false
);
);
jquery scroll draggable jquery-ui-draggable
asked Nov 13 '18 at 8:10
MaxAurayMaxAuray
3651314
I'm building a draggable content on mobile devices using jQueryUI.
I designed this draggable content in order to only slide horizontally and added limits for the content not to scroll out of its container. This works fine.
I would also like user to be able to drag vertically in order the whole document to scroll up and done, following the user gesture. I'm trying to use $('body').scrollTop() without success: drags horizontally the right way, do not move at all vertically.
Could you please help me?
Code pen is here: https://codepen.io/MaxAurray/pen/Krawxj
HTML:
<html>
<head></head>
<body>
<!-- DEBUG FRAME -->
<div class="debug">
<div class="body"></div>
<div class="drag"></div>
</div>
<!-- DUMMY CONTENT -->
<div class="content">Dummy content</div>
<!-- INTERESTING PART -->
<div class="container">
<h2>Beautiful images</h2>
<h3>(drag left and right)</h3>
<div class="draggable">
<div class="card">
<img src="https://picsum.photos/200/150/?random1">
<h3>Image 1</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random2">
<h3>Image 2</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random3">
<h3>Image 3</h3>
</div>
<div class="card">
<img src="https://picsum.photos/200/150/?random4">
<h3>Image 4</h3>
</div>
</div>
</div>
<!-- DUMMY CONTENT -->
<div class="content">Dummy content</div>
</body>
</html>
CSS :
body
margin: 50px;
.debug
position:fixed;
top:0;
right:0;
width:200px;
height:100px;
border:1px blue dashed;
.content
display:flex;
justify-content: center;
align-items:center;
background-color:rgba(0,0,0,0.2);
width:500px;
height:300px;
font-style: italic;
.container
width:500px;
background-color:rgba(255,0,0,0.2);
overflow-x:hidden;
h2,h3
text-align:center;
.draggable
background-color:rgba(0,255,0,0.2);
padding:20px 0;
display: flex;
width:(66% * 4);
justify-content: space-between;
.card
width: 100%;
border:1px rgba(0,0,255,0.2) dashed;
background-color:rgba(0,0,255,0.2);
text-align:center;
img
width:200px;
height:150px;
JavaScript:
/*
This code pen imports:
- jQuery,
- jQuery UI,
- jQueryUI-Touch-Punch
*/
$(document).ready(function()
$(".draggable").draggable(
// Save body position at drag begin
start: function(event, ui)
$("body").data("top", $("body").scrollTop());
,
drag: function(event, ui)
// Debug display
$(".debug .body").text("BODY - ScrollTop: " + (parseInt($("body").data("top")) - ui.position.top));
$(".debug .drag").text(
"DRAG - Top:" + ui.position.top + " / Left: " + ui.position.left
);
// Move body vertically, relative to drag position
$("body").scrollTop(parseInt($("body").data("top")) - ui.position.top);
// Get card width
var intDivLength = $(this)
.find("div:first-child")
.outerWidth();
// Do not allow to go left after first image
if (ui.position.left > 0)
ui.position.left = 0;
else if (
// Do not allow to go right after last image
ui.position.left <
-4 * intDivLength +
$(this)
.closest(".container")
.innerWidth()
)
ui.position.left =
-4 * intDivLength +
$(this)
.closest(".container")
.innerWidth();
// Force move on x axys.
ui.position.top = 0;
,
scroll: false
);
);
jquery scroll draggable jquery-ui-draggable
jquery scroll draggable jquery-ui-draggable
asked Nov 13 '18 at 8:10
MaxAurayMaxAuray
3651314
asked Nov 13 '18 at 8:10
MaxAurayMaxAuray
3651314
edited Nov 13 '18 at 8:19
MaxAuray
asked Nov 13 '18 at 8:10
MaxAurayMaxAuray
3651314
asked Nov 13 '18 at 8:10
MaxAurayMaxAuray
3651314
asked Nov 13 '18 at 8:10
MaxAurayMaxAuray
3651314
3651314
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53276476%2fjquery-draggable-make-container-move-horizontaly-document-move-verticaly%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53276476%2fjquery-draggable-make-container-move-horizontaly-document-move-verticaly%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
