Mixing
How to stop div from moving up when using mousemove?
0
I'm trying to keep the box from being dragged up, but can be dragged down, this is what I came up with but I can't figure out how to keep the original position so I have a reference to add it to the if check. It only appears after you scroll the main body a bit.
jsfiddle
window.addEventListener("scroll",function(){
if($(document).scrollTop() > 100){
$( ".box" ).slideDown({
start: function () {
$(this).css({
display: "flex"
})
}
});
}
var top = 0;
var divOverlay = document.getElementsByClassName('box')[0];
var is_clicked = false;
divOverlay.addEventListener('mousedown', function(e){
is_clicked = true;
top = divOverlay.offsetTop - e.clientY
}, true);
document.addEventListener('mouseup', function(){
is_clicked = false;
}, true);
document.addEventListener('mousemove', function(e){
event.preventDefault();
// add a check here so it doesn't allow dragging the container up?
if(is_clicked){
divOverlay.style.top = (e.clientY + top) + 'px';
// if the box reaches 50px down, it should automatically hide it if the user
//$('.box').slideUp();
}
}, true);
})
jquery html css
asked Jan 1 at 22:42
CraigCraig
291413
|
show 1 more comment
0
I'm trying to keep the box from being dragged up, but can be dragged down, this is what I came up with but I can't figure out how to keep the original position so I have a reference to add it to the if check. It only appears after you scroll the main body a bit.
jsfiddle
window.addEventListener("scroll",function(){
if($(document).scrollTop() > 100){
$( ".box" ).slideDown({
start: function () {
$(this).css({
display: "flex"
})
}
});
}
var top = 0;
var divOverlay = document.getElementsByClassName('box')[0];
var is_clicked = false;
divOverlay.addEventListener('mousedown', function(e){
is_clicked = true;
top = divOverlay.offsetTop - e.clientY
}, true);
document.addEventListener('mouseup', function(){
is_clicked = false;
}, true);
document.addEventListener('mousemove', function(e){
event.preventDefault();
// add a check here so it doesn't allow dragging the container up?
if(is_clicked){
divOverlay.style.top = (e.clientY + top) + 'px';
// if the box reaches 50px down, it should automatically hide it if the user
//$('.box').slideUp();
}
}, true);
})
jquery html css
asked Jan 1 at 22:42
CraigCraig
291413
can you please describe the desired behavior a bit more explicit? It's not easy to understand what you pretend.
– Vickel
Jan 1 at 23:00
@Vickel After you scroll down a bit on the example, and the blue box slides up, there's a down arrow, once you click on the arrow, I want to be able to drag the whole div down (as it's currently doing), or back up to the same exact position but it shouldn't allow to go higher than the original position. Pretty much a checker, to see if it's back to the original position in case I slide up again, or if I slide it down, I'm going to hide the box once it reaches the bottom.
– Craig
Jan 1 at 23:05
maybe your fiddle's version posted here is not correct, I cannot see any blue box, can you double-check?
– Vickel
Jan 1 at 23:09
@Vickel I updated it here jsfiddle.net/29r6mnov/1
– Craig
Jan 1 at 23:10
and with "drag" you want to drag (jQuery draggable) or get it to a new position programmatically?
– Vickel
Jan 1 at 23:10
|
show 1 more comment
0
0
0
I'm trying to keep the box from being dragged up, but can be dragged down, this is what I came up with but I can't figure out how to keep the original position so I have a reference to add it to the if check. It only appears after you scroll the main body a bit.
jsfiddle
window.addEventListener("scroll",function(){
if($(document).scrollTop() > 100){
$( ".box" ).slideDown({
start: function () {
$(this).css({
display: "flex"
})
}
});
}
var top = 0;
var divOverlay = document.getElementsByClassName('box')[0];
var is_clicked = false;
divOverlay.addEventListener('mousedown', function(e){
is_clicked = true;
top = divOverlay.offsetTop - e.clientY
}, true);
document.addEventListener('mouseup', function(){
is_clicked = false;
}, true);
document.addEventListener('mousemove', function(e){
event.preventDefault();
// add a check here so it doesn't allow dragging the container up?
if(is_clicked){
divOverlay.style.top = (e.clientY + top) + 'px';
// if the box reaches 50px down, it should automatically hide it if the user
//$('.box').slideUp();
}
}, true);
})
jquery html css
asked Jan 1 at 22:42
CraigCraig
291413
I'm trying to keep the box from being dragged up, but can be dragged down, this is what I came up with but I can't figure out how to keep the original position so I have a reference to add it to the if check. It only appears after you scroll the main body a bit.
jsfiddle
window.addEventListener("scroll",function(){
if($(document).scrollTop() > 100){
$( ".box" ).slideDown({
start: function () {
$(this).css({
display: "flex"
})
}
});
}
var top = 0;
var divOverlay = document.getElementsByClassName('box')[0];
var is_clicked = false;
divOverlay.addEventListener('mousedown', function(e){
is_clicked = true;
top = divOverlay.offsetTop - e.clientY
}, true);
document.addEventListener('mouseup', function(){
is_clicked = false;
}, true);
document.addEventListener('mousemove', function(e){
event.preventDefault();
// add a check here so it doesn't allow dragging the container up?
if(is_clicked){
divOverlay.style.top = (e.clientY + top) + 'px';
// if the box reaches 50px down, it should automatically hide it if the user
//$('.box').slideUp();
}
}, true);
})
jquery html css
jquery html css
asked Jan 1 at 22:42
CraigCraig
291413
asked Jan 1 at 22:42
CraigCraig
291413
edited Jan 1 at 23:12
Craig
asked Jan 1 at 22:42
CraigCraig
291413
asked Jan 1 at 22:42
CraigCraig
291413
asked Jan 1 at 22:42
CraigCraig
291413
291413
can you please describe the desired behavior a bit more explicit? It's not easy to understand what you pretend.
– Vickel
Jan 1 at 23:00
@Vickel After you scroll down a bit on the example, and the blue box slides up, there's a down arrow, once you click on the arrow, I want to be able to drag the whole div down (as it's currently doing), or back up to the same exact position but it shouldn't allow to go higher than the original position. Pretty much a checker, to see if it's back to the original position in case I slide up again, or if I slide it down, I'm going to hide the box once it reaches the bottom.
– Craig
Jan 1 at 23:05
maybe your fiddle's version posted here is not correct, I cannot see any blue box, can you double-check?
– Vickel
Jan 1 at 23:09
@Vickel I updated it here jsfiddle.net/29r6mnov/1
– Craig
Jan 1 at 23:10
and with "drag" you want to drag (jQuery draggable) or get it to a new position programmatically?
– Vickel
Jan 1 at 23:10
|
show 1 more comment
can you please describe the desired behavior a bit more explicit? It's not easy to understand what you pretend.
– Vickel
Jan 1 at 23:00
@Vickel After you scroll down a bit on the example, and the blue box slides up, there's a down arrow, once you click on the arrow, I want to be able to drag the whole div down (as it's currently doing), or back up to the same exact position but it shouldn't allow to go higher than the original position. Pretty much a checker, to see if it's back to the original position in case I slide up again, or if I slide it down, I'm going to hide the box once it reaches the bottom.
– Craig
Jan 1 at 23:05
maybe your fiddle's version posted here is not correct, I cannot see any blue box, can you double-check?
– Vickel
Jan 1 at 23:09
@Vickel I updated it here jsfiddle.net/29r6mnov/1
– Craig
Jan 1 at 23:10
and with "drag" you want to drag (jQuery draggable) or get it to a new position programmatically?
– Vickel
Jan 1 at 23:10
can you please describe the desired behavior a bit more explicit? It's not easy to understand what you pretend.
– Vickel
Jan 1 at 23:00
can you please describe the desired behavior a bit more explicit? It's not easy to understand what you pretend.
– Vickel
Jan 1 at 23:00
@Vickel After you scroll down a bit on the example, and the blue box slides up, there's a down arrow, once you click on the arrow, I want to be able to drag the whole div down (as it's currently doing), or back up to the same exact position but it shouldn't allow to go higher than the original position. Pretty much a checker, to see if it's back to the original position in case I slide up again, or if I slide it down, I'm going to hide the box once it reaches the bottom.
– Craig
Jan 1 at 23:05
@Vickel After you scroll down a bit on the example, and the blue box slides up, there's a down arrow, once you click on the arrow, I want to be able to drag the whole div down (as it's currently doing), or back up to the same exact position but it shouldn't allow to go higher than the original position. Pretty much a checker, to see if it's back to the original position in case I slide up again, or if I slide it down, I'm going to hide the box once it reaches the bottom.
– Craig
Jan 1 at 23:05
maybe your fiddle's version posted here is not correct, I cannot see any blue box, can you double-check?
– Vickel
Jan 1 at 23:09
maybe your fiddle's version posted here is not correct, I cannot see any blue box, can you double-check?
– Vickel
Jan 1 at 23:09
@Vickel I updated it here jsfiddle.net/29r6mnov/1
– Craig
Jan 1 at 23:10
@Vickel I updated it here jsfiddle.net/29r6mnov/1
– Craig
Jan 1 at 23:10
and with "drag" you want to drag (jQuery draggable) or get it to a new position programmatically?
– Vickel
Jan 1 at 23:10
and with "drag" you want to drag (jQuery draggable) or get it to a new position programmatically?
– Vickel
Jan 1 at 23:10
|
show 1 more comment
1 Answer
1
active
oldest
votes
1
You could try using Math.max to limit the maximum top position of the box to viewport height minus box height:
document.addEventListener('mousemove', function(e){
event.preventDefault();
// add a check here so it doesn't allow dragging the container up?
var maxTop = window.innerHeight - divOverlay.offsetHeight;
if(is_clicked){
divOverlay.style.top = Math.max(maxTop, e.clientY + top) + 'px';
// if the box reaches 50px down, it should automatically hide it if the user
//$('.box').slideUp();
}
}, true);
answered Jan 1 at 23:39
Peter LPeter L
535
add a comment |
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%2f53999520%2fhow-to-stop-div-from-moving-up-when-using-mousemove%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You could try using Math.max to limit the maximum top position of the box to viewport height minus box height:
document.addEventListener('mousemove', function(e){
event.preventDefault();
// add a check here so it doesn't allow dragging the container up?
var maxTop = window.innerHeight - divOverlay.offsetHeight;
if(is_clicked){
divOverlay.style.top = Math.max(maxTop, e.clientY + top) + 'px';
// if the box reaches 50px down, it should automatically hide it if the user
//$('.box').slideUp();
}
}, true);
answered Jan 1 at 23:39
Peter LPeter L
535
add a comment |
1
You could try using Math.max to limit the maximum top position of the box to viewport height minus box height:
document.addEventListener('mousemove', function(e){
event.preventDefault();
// add a check here so it doesn't allow dragging the container up?
var maxTop = window.innerHeight - divOverlay.offsetHeight;
if(is_clicked){
divOverlay.style.top = Math.max(maxTop, e.clientY + top) + 'px';
// if the box reaches 50px down, it should automatically hide it if the user
//$('.box').slideUp();
}
}, true);
answered Jan 1 at 23:39
Peter LPeter L
535
add a comment |
1
1
1
You could try using Math.max to limit the maximum top position of the box to viewport height minus box height:
document.addEventListener('mousemove', function(e){
event.preventDefault();
// add a check here so it doesn't allow dragging the container up?
var maxTop = window.innerHeight - divOverlay.offsetHeight;
if(is_clicked){
divOverlay.style.top = Math.max(maxTop, e.clientY + top) + 'px';
// if the box reaches 50px down, it should automatically hide it if the user
//$('.box').slideUp();
}
}, true);
answered Jan 1 at 23:39
Peter LPeter L
535
You could try using Math.max to limit the maximum top position of the box to viewport height minus box height:
document.addEventListener('mousemove', function(e){
event.preventDefault();
// add a check here so it doesn't allow dragging the container up?
var maxTop = window.innerHeight - divOverlay.offsetHeight;
if(is_clicked){
divOverlay.style.top = Math.max(maxTop, e.clientY + top) + 'px';
// if the box reaches 50px down, it should automatically hide it if the user
//$('.box').slideUp();
}
}, true);
answered Jan 1 at 23:39
Peter LPeter L
535
answered Jan 1 at 23:39
Peter LPeter L
535
answered Jan 1 at 23:39
Peter LPeter L
535
answered Jan 1 at 23:39
Peter LPeter L
535
535
add a comment |
add a comment |
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%2f53999520%2fhow-to-stop-div-from-moving-up-when-using-mousemove%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
can you please describe the desired behavior a bit more explicit? It's not easy to understand what you pretend.
– Vickel
Jan 1 at 23:00
@Vickel After you scroll down a bit on the example, and the blue box slides up, there's a down arrow, once you click on the arrow, I want to be able to drag the whole div down (as it's currently doing), or back up to the same exact position but it shouldn't allow to go higher than the original position. Pretty much a checker, to see if it's back to the original position in case I slide up again, or if I slide it down, I'm going to hide the box once it reaches the bottom.
– Craig
Jan 1 at 23:05
maybe your fiddle's version posted here is not correct, I cannot see any blue box, can you double-check?
– Vickel
Jan 1 at 23:09
@Vickel I updated it here jsfiddle.net/29r6mnov/1
– Craig
Jan 1 at 23:10
and with "drag" you want to drag (jQuery draggable) or get it to a new position programmatically?
– Vickel
Jan 1 at 23:10