Prevent dragging of child element within a draggable element - html

I have an element that I want to be able to drag, but I have elements inside of it that I don't want to be able to drag. I'm hoping there is a simple answer without (a lot of) jQuery.
Here is what I am trying to accomplish.
<html>
<head>
</head>
<style>
.a {
width:400px;
height:400px;
border:1px solid black;
}
.b{
width:200px;
height:200px;
border:1px solid black;
margin:20px;
}
</style>
<body>
<div class="a" draggable="true">
<span>I can drag this!</span>
<div class="b" draggable="false">
I can drag this as well, but I don't want to.
</div>
</div>
</body>
</html>
http://plnkr.co/edit/Xto7lPO32TRVScewJkS9
Any ideas?


Don't know if this question is still relevant, but I found a way to solve your problem like this:
<body>
<div class="a" draggable="true">
<span>I can drag this!</span>
<div class="b" draggable="true" ondragstart="event.preventDefault()">
I can drag this as well, but I don't want to.
</div>
</div>
</body>
Seems a little hacky, but it does the trick. I haven't found any other way to solve this. Hope it helps you.
Cheers
Sam


What you want to do is availlable in this code (that allows touch with finger too) :
var draggables = document.querySelectorAll('.is-draggable');
[].forEach.call(draggables, function (el) {
var startX, startY, initialX, initialY,
auth = function (target) {
var notDraggables = el.querySelectorAll('.is-not-draggable');
return [].filter.call(notDraggables, function (element) {
return target !== element;
}).length > 0;
};
function move(gesture) {
var deltaGestureX = gesture.clientX - initialX,
deltaGestureY = gesture.clientY - initialY,
deltaPositionX = startX + deltaGestureX,
deltaPositionY = startY + deltaGestureY,
limitX = parseInt(window.innerWidth - el.clientWidth, 10),
limitY = parseInt(window.innerHeight - el.clientHeight, 10);
if (deltaPositionY <= 0) {
el.style.top = '0px';
} else if (deltaPositionY >= limitY) {
el.style.top = limitY + 'px';
} else {
el.style.top = startY + deltaGestureY + 'px';
}
if (deltaPositionX <= 0) {
el.style.left = '0px';
} else if (deltaPositionX >= limitX) {
el.style.left = limitX + 'px';
} else {
el.style.left = startX + deltaGestureX + 'px';
}
return false;
}
function mousemove(e) {
move(e);
}
function mouseup() {
document.removeEventListener('mousemove', mousemove);
document.removeEventListener('mouseup', mouseup);
}
function touchmove(e) {
move(e.touches[0]);
}
function touchend() {
document.removeEventListener('touchmove', touchmove);
document.removeEventListener('touchend', touchend);
}
el.addEventListener('touchstart', function (e) {
if (auth(e.target)) {
startX = el.offsetLeft;
startY = el.offsetTop;
initialX = e.touches[0].clientX;
initialY = e.touches[0].clientY;
document.addEventListener('touchmove', touchmove);
document.addEventListener('touchend', touchend);
}
});
el.addEventListener('mousedown', function (e) {
if (auth(e.target)) {
startX = el.offsetLeft;
startY = el.offsetTop;
initialX = e.clientX;
initialY = e.clientY;
document.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
return false;
}
});
});
See demo : http://plnkr.co/edit/d6wVpTDcGDxLHAwkAVgD?p=preview

Related

Scroll up drag in web page

I'm looking to scroll up a page when I have a div selected, so the goal is to drag a div and move the page up. The scoll down works strangely.
Is there a problem with angular or html that would be listed?
(I don't want to use Jquery)
<div class="panel panel-default">
<div class="panel-body">
<p class="h4">Commandes</p>
<div class="row">
<div class="col-md-12 col-xs-12 text-right" draggable="true">
<button type="button" (click)="addCommande()" class="btn btn-labeled btn-purple m-l-4">
<span class="btn-label"><i class="fa fa-plus"></i></span><span class="hidden-xs">Ajouter une commande</span>
</button>
</div>
</div>...

editadding solutions based on our discussion in the comments section
im still not sure if I got your end goal, but I hope I did
[first solution] add `scrollPositionRestoration: 'enabled'` to `app-routing.module.ts` 's `RouterModule`:
RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
[second solution] try implementing this logic]
export class ScrollToTopComponent implements OnInit {
windowScrolled: boolean;
constructor(#Inject(DOCUMENT) private document: Document) {}
#HostListener("window:scroll", [])
onWindowScroll() {
if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
this.windowScrolled = true;
}
else if (this.windowScrolled && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) {
this.windowScrolled = false;
}
}
scrollToTop() {
(function smoothscroll() {
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo(0, currentScroll - (currentScroll / 8));
}
})();
}
ngOnInit() {}
[third solution]
If all fails, then create some empty HTML element (eg: div) at the top (or desired scroll to location) with id="top":
<div id="top"></div>
And in component:
ngAfterViewInit() {
// Hack: Scrolls to top of Page after page view initialized
let top = document.getElementById('top');
if (top !== null) {
top.scrollIntoView();
top = null;
}
}
I dont have much to work with regarding how you built your code, but I hope this might solve it (it will make draggable items scroll your screen) :)
var stop = true;
document.quertSelector(".draggable").on("drag", function (e) {
stop = true;
if (e.originalEvent.clientY < 150) {
stop = false;
scroll(-1)
}
if (e.originalEvent.clientY > ($(window).height() - 150)) {
stop = false;
scroll(1)
}
});
document.querySelector(".draggable").on("dragend", function (e) {
stop = true;
});
var scroll = function (step) {
var scrollY = window.pageYOffset;
window.pageYOffset(scrollY + step);
if (!stop) {
setTimeout(function () { scroll(step) }, 20);
}
}

d3 svg transition has slight unwanted horizontal movement on Firefox

The following has some SVG squares that march upwards once per second. In Google Chrome it looks fine. In Firefox, the squares shift right and left by about 1 pixel which is not what I intended.
Can anyone help figure out why?
I'm sorry this code snippet is not simpler; this is about as basic as I could go from a much longer file in which I removed all the unrelated aspects.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<style type='text/css'>
.hidden {
display: none;
}
#ticktock {
position: absolute;
top: 550px;
left: 400px;
}
svg rect.cell {
fill: none;
stroke: steelblue;
}
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(event) {
var L = 25;
var maxFacetCount = 8;
var state = {
nexttick: 0,
ticksize: 500,
n: -8,
nx: 8,
wheel: [],
nfacet: maxFacetCount,
init: true,
ticktock: true
};
function update_state(state)
{
if (state.ticktock)
{
if (state.wheel.length >= state.nfacet)
state.wheel.shift();
state.wheel.push({n: ++state.n });
}
}
state.wheel = state.wheel.slice(-1);
function prepare_view(state)
{
var width = 60 + (state.nx+0.5)*(L+2);
var height = 5 + (state.nfacet+0.5)*L;
var svg = d3.select("#wheel-container").append("svg")
.attr("width", width)
.attr("height", height);
var x1 = L*0.5+5;
var wheel = svg.append('g')
.attr('id','wheel')
.attr('transform','translate('+x1+',0)');
}
prepare_view(state);
function facet_enter(facets, t)
{
var facet = facets.append('g');
for (var i = 0; i < state.nx; ++i)
{
facet.append('rect')
.attr('x',i*L)
.attr('y',0)
.attr('width',L)
.attr('height',L)
.attr('class','cell');
}
facet_move(facet, state.init ? null : t);
}
function facet_move(facet, t)
{
(t ? facet.transition(t) : facet)
.attr('opacity',function(d,i) {
var age = state.n - d.n;
return age == 0 ? 0 : 1-age/state.nfacet; })
.attr('transform',function(d,i) { return 'translate(0,'+((d.n-state.n+state.nfacet-1)*L)+')'; });
}
function facet_update(facets, t)
{
facet_move(facets, t);
}
function update_view(state, ticktock)
{
var wheel = d3.select("#wheel");
var facets = wheel.selectAll('g');
if (state.ticktock)
{
var t = d3.transition().duration(300);
var upd = facets
.data(state.wheel, function(d,i) { return d.n; });
upd .call(facet_update, t)
.enter()
.call(facet_enter, t)
upd.exit()
.transition(t)
.attr('transform','translate (0,'+(-L)+')')
.remove();
}
else
{
// tock
var t = d3.transition().duration(100);
var t2 = t.transition().duration(100);
var upd = facets
.data(state.wheel, function(d,i) { return d.n; });
upd.call(facet_update, t)
.enter()
.call(facet_enter, t);
}
}
var tmr = d3.timer(function(elapsed) {
var do_something = false;
while (elapsed >= state.nexttick)
{
do_something = true;
state.nexttick += state.ticksize;
}
if (do_something && !(d3.select('#pause').property('checked') ))
{
state.ticktock = !state.ticktock;
update_state(state);
update_view(state);
state.init = false;
}
} );
});
</script>
</head>
<body>
<div id='wheel-container' ></div>
<form class="">
<input type="checkbox" id="pause" name="pause">pause</input>
</form>
<div id='ticktock' class='hidden'></div>
</body>
</html>

Looks like floating-point rounding errors strike again. I changed to shape-rendering: crispEdges; and then rounded to an integer translate in one of the root elements and that seems to fix most of it (still a little residual y-axis shift).
was:
var x1 = L*0.5+5;
var wheel = svg.append('g')
.attr('id','wheel')
.attr('transform','translate('+x1+',0)');
changed to:
var x1 = Math.round(L*0.5+5);
var wheel = svg.append('g')
.attr('id','wheel')
.attr('transform','translate('+x1+',0)');
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<style type='text/css'>
.hidden {
display: none;
}
#ticktock {
position: absolute;
top: 550px;
left: 400px;
}
svg rect.cell {
fill: none;
stroke: steelblue;
shape-rendering: crispEdges;
}
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(event) {
var L = 25;
var maxFacetCount = 8;
var state = {
nexttick: 0,
ticksize: 500,
n: -8,
nx: 8,
wheel: [],
nfacet: maxFacetCount,
init: true,
ticktock: true
};
function update_state(state)
{
if (state.ticktock)
{
if (state.wheel.length >= state.nfacet)
state.wheel.shift();
state.wheel.push({n: ++state.n });
}
}
state.wheel = state.wheel.slice(-1);
function prepare_view(state)
{
var width = 60 + (state.nx+0.5)*(L+2);
var height = 5 + (state.nfacet+0.5)*L;
var svg = d3.select("#wheel-container").append("svg")
.attr("width", width)
.attr("height", height);
var x1 = Math.round(L*0.5+5);
var wheel = svg.append('g')
.attr('id','wheel')
.attr('transform','translate('+x1+',0)');
}
prepare_view(state);
function facet_enter(facets, t)
{
var facet = facets.append('g');
for (var i = 0; i < state.nx; ++i)
{
facet.append('rect')
.attr('x',i*L)
.attr('y',0)
.attr('width',L)
.attr('height',L)
.attr('class','cell');
}
facet_move(facet, state.init ? null : t);
}
function facet_move(facet, t)
{
(t ? facet.transition(t) : facet)
.attr('opacity',function(d,i) {
var age = state.n - d.n;
return age == 0 ? 0 : 1-age/state.nfacet; })
.attr('transform',function(d,i) { return 'translate(0,'+((d.n-state.n+state.nfacet-1)*L)+')'; });
}
function facet_update(facets, t)
{
facet_move(facets, t);
}
function update_view(state, ticktock)
{
var wheel = d3.select("#wheel");
var facets = wheel.selectAll('g');
if (state.ticktock)
{
var t = d3.transition().duration(300);
var upd = facets
.data(state.wheel, function(d,i) { return d.n; });
upd .call(facet_update, t)
.enter()
.call(facet_enter, t)
upd.exit()
.transition(t)
.attr('transform','translate (0,'+(-L)+')')
.remove();
}
else
{
// tock
var t = d3.transition().duration(100);
var t2 = t.transition().duration(100);
var upd = facets
.data(state.wheel, function(d,i) { return d.n; });
upd.call(facet_update, t)
.enter()
.call(facet_enter, t);
}
}
var tmr = d3.timer(function(elapsed) {
var do_something = false;
while (elapsed >= state.nexttick)
{
do_something = true;
state.nexttick += state.ticksize;
}
if (do_something && !(d3.select('#pause').property('checked') ))
{
state.ticktock = !state.ticktock;
update_state(state);
update_view(state);
state.init = false;
}
} );
});
</script>
</head>
<body>
<div id='wheel-container' ></div>
<form class="">
<input type="checkbox" id="pause" name="pause">pause</input>
</form>
<div id='ticktock' class='hidden'></div>
</body>
</html>

I want to make a sidebar like google play store by css and js

I want to make a sidebar like gool
e play store..When i scroll left side in the body then the sidebar should appear...
Is there any idea to make such a sidebar?

For js.
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6 && $('#sidebar').offset()!=null) {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('margin-top').replace(/auto/, 0));
var height = $('#sidebar').height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 15;
scrollingSideBar(top,height,footerTop,gap);
$(window).resize(function (event) {
scrollingSideBar(top,height,footerTop,gap);
});
$(window).scroll(function (event) {
scrollingSideBar(top,height,footerTop,gap);
});
}
});
function scrollingSideBar(top,height,footerTop,gap){
var winHeight = $(window).height();
var winWidth = $(window).width();
var y = $(this).scrollTop();
var x = $(this).scrollLeft();
if (height+top+gap < winHeight) {
$('#sidebar').css({ position: "fixed",top: top, left:-x});
} else if(y+winHeight > height+top+gap){
$('#sidebar').css({position: "fixed",top: winHeight-height-gap, left:-x});
} else if (y+winHeight > footerTop) {
$('#sidebar').css({position: "fixed",top: footerTop-height-y-gap, left:-x});
} else {
$('#sidebar').css({position: "absolute",top: top, left:-x/winWidth});
}
}
For CSS you just right click on browser and inspect it.

How to make a single button appear on only 1 jquery function

I have a button called add to profile, all I need to know is how do I make it so its only on the last jQuery div, after the last next.
Like question 1, then next, question 2 back and next, question 3, back and add button.
So if you can really help me out here quick I'd really appreciate it.
Here's my code:
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$("#2").hide();
$("#3").hide();
$("#4").hide();
$('#back').hide();
$("#forward").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>

...
if (counter === maxThings) {
$('#forward').hide();
$("#AddToProfile").show();
} else {
$("#AddToProfile").hide();
}
...
And I really don't like youre coding :) You'll have to change code every time you'll add new div.
I would do something like that:
- Every div would have class question
- Every div's START visibility attribute would be defined in html (every div except first would have in style something like visibility:hidden)
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$('#back').hide();
$("#forward").click(function () {
$("div.question").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("div.question").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>

Render Three.js into a div element

I am using Three.js. Having a html site with two div elements, is it possible to render just in one div element?
HTML Code:
<body>
<div id="twocols">
<div id="detailinfo">
<span class="c">Detailinformationen:</span><br/>
<span id="tb" class="g"></span><br/>
<span class="c">Grafiken:</span>
<div id="chart"></div>
<div id="chart2"></div>
</div>
<div id="city">
</div>
</div>
</body>
I want to render into the city div.
Three.js Code:
function initScene() {
//container = document.createElement('div');
//document.body.appendChild(container);
scene = new THREE.Scene();
createCamera();
createLight();
createProjector();
createRenderer();
createControls();
//...
}
createRenderer:
function createRenderer() {
renderer = new THREE.WebGLRenderer({
antialias : ANTIALIAS,
preserveDrawingBuffer : DRAWINGBUFFER
});
renderer.setSize(document.getElementById("city").offsetWidth, document.getElementById("city").offsetHeight);
document.getElementById("city").appendChild(renderer.domElement);
THREEx.Screenshot.bindKey(renderer); // add the printscreen shortcut with "p"
}
createControls:
function createControls() {
controls = new InteractionManager(camera, document.getElementById("city"));
//...
}
InteractionManager.js
initialize: function(camera, domElement) {
this.object = camera;
this.domElement = (domElement !== undefined) ? domElement : document;
this.target = new THREE.Vector3( 0, 0, 0 );
//this.chartManager = new ChartsManager();
if ( this.domElement === document ) {
this.viewHalfX = window.innerWidth / 2;
this.viewHalfY = window.innerHeight / 2;
} else {
this.viewHalfX = this.domElement.offsetWidth / 2;
this.viewHalfY = this.domElement.offsetHeight / 2;
//alert(domElement.offsetWidth + " " + domElement.offsetHeight);
//this.domElement.setAttribute( 'tabindex', -1 );
}
//...
},
so far..

Instead of:
container = document.createElement('div');
Use:
container = document.getElementById('city');