<script>
$(document).ready(function(e) {
$(function(){
$( "#draggable" ).draggable({
containment: "#box",
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
}
});
});
});
</script>
<style>
body{margin:0;}
#draggable{width:100px; height:100px; background:red;}
#box{width:500px; height:500px; border:solid 1px #000; margin:100px;}
</style>
<div id="box">
<div id="draggable"></div>
</div>
<input id="posX" type="text" />
<input id="posY" type="text" />
I have a div use jQuery draggable and detect the position.
My question is how can I get the offset position according to the containment $('#box'), not according to the document?
As the draggable element is appended to the body, it's not really inside the #box element at all when dragged, so you have to subtract the position of the containing element, and in your case the border as well, to get the right values
$(function(){
var box = $('#box').offset(),
border = parseInt($('#box').css('border-width').replace(/\D/g,''), 10);
$( "#draggable" ).draggable({
containment: "#box",
drag: function(){
var offset = $(this).offset();
var xPos = offset.left - box.left - border;
var yPos = offset.top - box.top - border;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
}
});
});
FIDDLE
Related
I have been tring to set img at same position as another using jquery .position() and .css()
Here is the code:
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
$('#img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
Any thoughts?
You can overlap images this way. I set the position to fixed then set the left and top values for both other images. I'm not entirely sure why'd you want this; so, if it's not the desired result, just comment.
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2, #img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
img {
width:100px;
height:100px;
border:1px solid black;
}
#img1, #img2, #img3 {
position:fixed;
}
#img1 {
left:50px;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img1" src="http://neil.computer/stack/bg.jpg" />
<img id="img2" src="http://neil.computer/stack/bg2.jpg" />
<img id="img3" src="http://neil.computer/stack/bg3.jpg" />
For the translation of an element to work in this way
position: relative;
left: 20px;
I dont exactly know what ur upto but i just corrected your code.
$(function(){
var position = $('#img1').position();
var x = $("#img2").position();
$("#pos").text("top: "+x.top+" "+"left: "+x.left);
$('#img3').css({ 'left': x.left + 'px', 'top': x.top + 'px' });
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.w3schools.com/css/img_fjords.jpg" id="img1" style="height:100px;width:100px;"/>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" id="img2" style="height:100px;width:100px;"/>
<p id="pos"></p>
</body>
</html>
I have a dynamic webpage where i use Jquery "draggable" & "droppable".
I'm trying to move one element from one "parent" to another.
When i do "console.log" i can see that the element has a new parent.
But When i later on add more HTML content to the DOM, the element won't move with it's new parent. It's stuck to the "document" offset position.
How can i solve this?
FIDDLE
https://jsfiddle.net/0apuqnxd/13/
JS
//Make elements Draggable
$('.elementsDiv').draggable({
revert: 'invalid',
});
var flakUpId = $('#1').attr('id');
$('#btnAddDropZone').on('click', function() {
flakUpId++;
var flakUp = "<div class='flakUp'>DropZone " + flakUpId + " </div>";
$('#dropZones').prepend(flakUp);
})
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
//Detach element from DOM
draggable.detach();
//Append element to droped position and into new parent?
draggable.css({
"left": ui.offset.left,
"top": ui.offset.top,
"position": "absolute"
}).appendTo(droppable);
},
});
How about this?
//Make elements Draggable
$('.elementsDiv').draggable({
revert: 'invalid',
});
var flakUpId = $('#1').attr('id');
$('#btnAddDropZone').on('click', function() {
flakUpId++;
var flakUp = "<div class='flakUp'>DropZone " + flakUpId + " </div>";
$('#dropZones').prepend(flakUp);
registDroppable();
$(".flakUp .elementsDiv").each(function(e) {
$(this).css({"top": $(this).offset().top+$(".flakUp").height()});
});
})
function registDroppable() {
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.css({
"left": ui.offset.left,
"top": ui.offset.top,
"position": "absolute"
}).appendTo(droppable);
},
});
}
registDroppable();
https://jsfiddle.net/ChaHyukIm/0apuqnxd/15/
I just changed three things and it seems working:
1) added ID and class when you add new Div:
a)id="12" - Hardcoded to Test you can change later
b) class="ui-droppable" added
$('#btnAddDropZone').on('click', function() {
flakUpId++;
var flakUp = "<div id='12' class='flakUp ui-droppable '>DropZone " + flakUpId + " </div>";
$('#dropZones').prepend(flakUp);
})
2). I gave different ID=100 instead of 1.
Because i saw another div with id="1"
<div id="dropZones">
<div class='flakUp' id="100">DropZone 1</div>
</div>
Full Code:
HTML
<div class="row well">
<button class="btn btn-primary" id="btnAddDropZone">Add dropZone</button>
</div>
<div id="dropZones">
<div class='flakUp' id="100">DropZone 1</div>
</div>
<hr>
<div class="elementsDiv" id="1" style="width: 200px; height: 25px; background-color: #c2c2d6; cursor: move">Drag me 1</div>
<div class="elementsDiv" id="2" style="width: 150px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 2</div>
<div class="elementsDiv" id="3" style="width: 160px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 3</div>
Script
//Make elements Draggable
$('.elementsDiv').draggable({
revert: 'invalid',
});
var flakUpId = $('#1').attr('id');
$('#btnAddDropZone').on('click', function() {
flakUpId++;
var flakUp = "<div id='12' class='flakUp ui-droppable'>DropZone " + flakUpId + " </div>";
$('#dropZones').prepend(flakUp);
})
$('.flakUp, .flakDown').droppable({
accept: '.elementsDiv',
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
var offset = $(this).offset();
var relX = event.pageX - offset.left;
var relY = event.pageY - offset.top;
draggable.css({
"left": ui.offset.left,
"top": ui.offset.top,
"position": "absolute"
}).appendTo(droppable);
},
});
$(document).ready(function() {
var mouseX;
var mouseY;
$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$("#maincontainer").mousemove(function() {
// $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
$('#DivToShow').html("Y " + mouseY + " --- " + "X " + mouseX);
if (mouseY > 230) {
$('html, body').animate({
scrollBottom: $elem.height()
}, 800);
}
});
});
pls help, I am trying to make a auto page up and down scroll based on pointer position. when pointer coming to bottom of browser, page need to scroll down 60px ++. not a single scroll to end of page.
Try this solution.
On mousemove, get the clientY and the window height. If the difference is less than 60, then scroll 60 more than the current scrollTop:
$(document).on('mousemove', function(e) {
var y = e.clientY;
var h = $(window).height();
var n = h - y;
if (n < 60) {
var t = parseFloat($(window).scrollTop());
console.log(t);
$('html,body').animate({scrollTop:t + 60 + 'px'},200);
} else {
$('html,body').stop();
}
});
#wrapper,
.section {
width:100%;
float:left;
}
.section {
height:80px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
I am trying to move a image in a div like a facebook cover page, but it is not moving smoothly with image tag . when I put this image in a div like a background image it is working
my js code is ..
var draggable = function(element) {
element.addEventListener('mousedown', function(e) {
e.stopPropagation();
if (e.target != element)
return;
var offsetX = e.pageX - element.offsetLeft;
var offsetY = e.pageY - element.offsetTop;
function move(e) {
var ele = document.getElementById('ele');
var width = 400-ele.clientWidth;
var height = 400-ele.clientHeight;
element.style.left = (e.pageX - offsetX) + 'px';
element.style.top = (e.pageY - offsetY) + 'px';
}
function stop(e) {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', stop);
}
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', stop);
});
}
function init() {
var ele = document.getElementById('ele');
draggable(ele);
}
and my html code which is not working is..
<body onload="init();">
<div id="testdiv" style="position:relative;left:100px;overflow:hidden;border:1px solid #ccc;width:400px;height:400px">
<img src="Desert.jpg" id="ele" style="position:absolute;"></img>
</div>
</body>
and this code is working..
<body onload="init();">
<div id="testdiv" style="position:relative;left:100px;overflow:hidden;border:1px solid #ccc;width:400px;height:400px">
<div id="ele" style="width:100%; height:100%; background-color: gray; position:absolute; background-image:url( 'Desert.jpg' );"></div>
</div>
</body>
You could refer to this question, which handles the same idea of dragging images, althought the question is slightly different. Check out his/her JSFiddle from question.
Check it out here!
<img> is a self-closing tag. You don't need the </img> as it's not valid. Remove that and it should work fine. Depending on your doctype you should use:
HTML5
<img src="Desert.jpg" id="ele" style="position:absolute;">
XHTML (note the / at the end of the tag)
<img src="Desert.jpg" id="ele" style="position:absolute;" />
I have this markup.
<div class="row">
<div class="col-md-4">
<img src="imgsrc.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="imgsrc.jpg" />
</div>
</div>
With .col-md-4 has relative position, when I try to attach mouseover event to the .col-md-4 and get position of its offset it's return wrong offset for second .col-md-4 in second row. Here is the script
$('.col-md-4').hover(function(){
var offset = $(this).position();
var height = $(this).height();
console.log(offset); // this gives the wrong offset when hovering over second col-md-4 in second row
$('#shadow2').stop(true, true).animate({
'left': offset.left,
'top': offset.top + height + 10
});
}, function(){
$('#shadow2').animate({
'left': '-350px'
});
});
try using .offset(), it gives position of element relative to document, change
var offset = $(this).position();
to
var offset = $(this).offset();
Update::
$('.col-md-4').hover(function(){
var childPosition = $(this).offset();
var parentPosition = $(this).parent().offset();
var actualOffset = {
top: childPosition.top - parentPosition.top,
left: childPosition.left - parentPosition.left
}
var height = $(this).height();
console.log(offset);
$('#shadow2').stop(true, true).animate({
'left': actualOffset.left,
'top': actualOffset.top + height + 10
});
....