Checking element visibility using elementFromPoint() method - javascript

I'm trying to check to make sure an item is visible before I start working on it using the following function
isVisible: function (node, doc, x, y) {
var el = doc.elementFromPoint(x, y);
if (node === el) return true;
else return false;
},
x and y are positions of the selected node and is calculated by
findPos: function (node) {
var pos = new Object();
pos.left = pos.top = 0;
if (node.offsetParent) {
do {
pos.left += node.offsetLeft;
pos.top += node.offsetTop;
} while (node = node.offsetParent);
}
return pos;
}
Everything works fine. However, when I scroll the page down, the isVisible function is no longer returning the right value. This is caused by the position having changed but the find position function not returning the right value.
Is there a method to get the position of an element like the reverse of elementFromPoint? Or does anyone have another method?

I just wrote an isVisible() method that uses the elementFromPoint() method and should work in IE9+ to detect if an element is visible.
var isVisible = function(elem) {
var w = window, d = document, height, rects, on_top;
if(!elem || (elem && elem.nodeType !== 1) || !elem.getClientRects || !d.elementFromPoint || !d.querySelector || !elem.contains) {
return false;
}
if (elem.offsetWidth === 0 || elem.offsetHeight === 0) {
return false;
}
height = w.innerHeight ? w.innerHeight: d.documentElement.clientHeight;
rects = elem.getClientRects();
on_top = function(r, elem) {
var x = (r.left + r.right)/2,
y = (r.top + r.bottom)/2,
elemFromPoint = d.elementFromPoint(x, y);
return (elemFromPoint === elem || elem.contains(elemFromPoint));
};
for (var i = 0, l = rects.length; i < l; i++) {
var r = rects[i],
in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);
if (in_viewport && on_top(r, elem)) {
return true;
}
}
return false;
};
You would call it like this: isVisible(document.getElementById('at-follow'));
Also, here is the gist of it.

I was able to fix this by adding window.scrollX and window.scrollY to the doc.elementFromPoint() input parameters x and y
isVisible: function (node, doc, x, y)
{
var el = doc.elementFromPoint(x-window.scrollX, y-window.scrollY);
if (node === el) return true;
else return false;
},
this seems to work fine

This library should be what you're looking for: https://github.com/cpatik/within-viewport/blob/master/withinViewport.js

Related

ANSI escape codes not moving cursor horizontally

I am trying to make a text editor in the terminal with node and typescript but the ansi escape codes aren't moving the cursor horizontally. THe cursor moves vertically correctly but it just wont move horizontally.
Code: (index.ts)
var width = process.stdout.columns;
var height = process.stdout.rows;
function dupe(input: string, length: number) {
var newI = ''
for (var i = 0; i < length; i++) {
newI += input
}
return newI
}
function pad(pad: string, input: string, width: number): string {
var space = ''
for (var i = 0; i < width - input.length; i++) {
space += pad
}
return input + space;
}
var stdin = process.stdin;
// without this, we would only get streams once enter is pressed
stdin.setRawMode( true );
// resume stdin in the parent process (node app won't quit all by itself
// unless an error or process.exit() happens)
stdin.resume();
// i don't want binary, do you?
stdin.setEncoding( 'utf8' );
// on any data into stdin
stdin.on( 'data', function( key ){
// ctrl-c ( end of text )
if ( key.toString() === '\u0003' ) {
process.exit();
}
// write the key to stdout all normal like
update(key.toString())
});
function setpos(x: number, y: number) {
return `\x1b[H\x1b[${y}B\x1b[${x}C`
}
var mousex = 0;
var mousey = 0;
async function update(key: string) {
key = key.toLowerCase();
width = process.stdout.columns;
height = process.stdout.rows;
console.clear()
console.log(dupe('-', width))
for ( var i = 1; i <= height-2; i++ ) {
process.stdout.write(`${pad(' ', i.toString(), 3)}|This is a test string\n`)
}
if (key === 'w') { mousey --;}
if (key === 's') { mousey ++;}
if (key === 'a') { mousex --;}
if (key === 'd') { mousex ++;}
if (mousey < 0) { mousey = 0}
if (mousey > height) { mousey = height}
if (mousex < 0) { mousex = 0 }
if (mousex > width) { mousex = width}
console.log(setpos(mousex, mousey))
console.log(`\x1b[1A${mousex} ${mousey} ${width} ${height}`)
}
update('')
stack overflow why do i need to write more i literally have nothing else to write.
Nevermind I was just dumb and didn't just try a different package.
Installing terminal-kit fixed my problem.

HowTo select svg-objects inside a drawnrect d3

I'm creating a little graphic editor, where the user (by now) could insert some "symbols", that consist of some svg-elements, grouped inside a g-tag.
Additionally, he could draw lines in different colors yet.
By now I am able to select single drawn lines and Symbols and I also could select more objects by clicking on them, while Holding the Control-key. (For those, who are interrested in it, a selected object gets a class "selected", so I could find them programatically by d3.select('.selected').)
My new Goal ist to draw a rectangle with the mouse over such Elements and select the Elements inside the rectangle.
For this, I catch the pointerdown-event, where I add a rectangle to the svg-box and scale it inside pointermove-event.
Attached, a simple Video of my actual Version.
I have two Questions by now:
1) How can I avoid that the Elements are higlited like selected text while moving the mouse with pressed left button? (you can see the flickering in the Video) Is there perhaps something like event.preventDefault(); to do so?
2) ...and that is the greater problem…
Is drawing a rectangle a good way to do this and how can i quickly calculate which elements are inside this rectangle? Is there perhaps a specialized function in d3, that I didn't find yet?
EDIT: for clarification, I attached a screenshot of the svg-structur of a Symbol and a line:
Simple sample video
CodePen example: https://codepen.io/Telefisch/pen/LoEReP
$(document).ready(function () {
svgDrawing = document.getElementById('drawing');
svgDrawing.addEventListener('pointerdown', mouseButtonPressed);
svgDrawing.addEventListener('pointerup', mouseButtonReleased);
svgDrawing.addEventListener('pointermove', mouseMove);
}) ...
Additional question:
What's the difference between svg_children[i].className.baseVal += ' selected'; and svg_children[i].classList.add('selected')I have some problems that baseVal seems not to be stored inside the dom? If I use it that way, I couldn't see the class in the elements-pane of the developer-window, but it pops up at the symbol. If I use ClassList.add, I can see the class in the Elements-Pane also.
Screenshot:
As you can see, the yellow-marked seems to have the class in the popup but not in the Elements-code. This is added by svg_children[i].className.baseVal += ' selected';
The red-marked 'selected'-class was added by svg_children[i].classList.add('selected')
Thanks so far, Carsten
I think I have a solution for you, using .getClientBoundingRect() of the svg elements and the <rect.selectionBox/> to find out if your box is overlapping them etc.
Demo - https://codepen.io/Alexander9111/pen/XWJQoPP:
Code:
var svgDrawing = document.getElementById('drawing');
var pointerOrigin;
var point = svgDrawing.createSVGPoint();
var drawRectToSelect
var raster = 10;
$(document).ready(function () {
svgDrawing = document.getElementById('drawing');
svg_rect = svgDrawing.getBoundingClientRect();
console.log("svg_rect", svg_rect);
g = document.getElementById("437");
//svg_children = g.childNodes;
svg_children = g.querySelectorAll("*");
console.log(svg_children);
svgDrawing.addEventListener('pointerdown', e => mouseButtonPressed(e));
svgDrawing.addEventListener('pointerup', e => mouseButtonReleased(e));
svgDrawing.addEventListener('pointermove', e => mouseMove(e));
})
function mouseButtonPressed(evt) {
pointerOrigin = getPointFromEvent(evt);
if(evt.button === 0)
{
drawRectToSelect = d3.select('#drawing')
.append('rect')
.attr("id","temp_selection")
.classed('selectionBox', true)
.attr("x", Math.round(pointerOrigin.x / raster) * raster)
.attr("y", Math.round(pointerOrigin.y / raster) * raster)
.attr("height", raster)
.attr("width", raster);
}
}
function mouseMove(evt) {
if (!drawRectToSelect) { return; }
evt.preventDefault(); //Verschieben der gesamten Seite unterbinden
var pointerPosition = getPointFromEvent(evt);
if (drawRectToSelect) {
drawRectToSelect
.attr("width", Math.round((pointerPosition.x - pointerOrigin.x) / raster) * raster)
.attr("height", Math.round((pointerPosition.y - pointerOrigin.y) / raster) * raster);
}
}
function elementIsInside(el, box){
var result = false;
el_rect = el.getBoundingClientRect();
box_rect = box.getBoundingClientRect();
// console.log("rects_" + el.tagName, el_rect, box_rect)
// console.log("rects_" + el.tagName, el, box)
if (el_rect.right >= box_rect.left && el_rect.right <= box_rect.right
&& el_rect.bottom >= box_rect.top && el_rect.bottom <= box_rect.bottom){
result = true;
} else if (el_rect.left >= box_rect.left && el_rect.left <= box_rect.right
&& el_rect.bottom >= box_rect.top && el_rect.bottom <= box_rect.bottom){
result = true;
} else if (el_rect.right >= box_rect.left && el_rect.right <= box_rect.right
&& el_rect.top >= box_rect.top && el_rect.top <= box_rect.bottom){
result = true;
} else if (el_rect.left >= box_rect.left && el_rect.left <= box_rect.right
&& el_rect.top >= box_rect.top && el_rect.top <= box_rect.bottom){
result = true;
}
// console.log("result_" + el.tagName, result)
return result;
}
function mouseButtonReleased(evt) {
svgDrawing.style.cursor = null;
if (drawRectToSelect) {
const box = document.querySelector('#temp_selection');
for (i=0; i < svg_children.length; i++){
//svg_children[i].classList.add("selected");
console.log(svg_children[i].tagName)
console.log(svg_children[i].className.baseVal)
child_rect = svg_children[i].getBoundingClientRect();
console.log(child_rect);
//calculate elements inside rectangle
if (elementIsInside(svg_children[i], box )){
if (svg_children[i].className.baseVal.includes('selected')){
} else {
svg_children[i].className.baseVal += " selected";
svg_children[i].className.animVal += " selected";
}
} else {
if (svg_children[i].className.baseVal.includes('selected')){
console.log("true")
svg_children[i].className.baseVal = svg_children[i].className.baseVal.replace(" selected"," ");
svg_children[i].className.animVal = svg_children[i].className.animVal.replace(" selected"," ");
console.log(svg_children[i].className.baseVal);
} else {
console.log("false")
console.log(svg_children[i].className.baseVal);
}
}
}
//Delete selection-rectangle
drawRectToSelect.remove();
drawRectToSelect = null;
}
}
function getPointFromEvent(evt) {
if (evt.targetTouches) {
point.x = evt.targetTouches[0].clientX;
point.y = evt.targetTouches[0].clientY;
} else {
point.x = evt.clientX;
point.y = evt.clientY;
}
var invertedSVGMatrix = svgDrawing.getScreenCTM().inverse();
return point.matrixTransform(invertedSVGMatrix);
}
Firstly, you have to pass in the event argument to use it later:
$(document).ready(function () {
svgDrawing = document.getElementById('drawing');
svg_rect = svgDrawing.getBoundingClientRect();
console.log("svg_rect", svg_rect);
g = document.getElementById("437");
//svg_children = g.childNodes;
svg_children = g.querySelectorAll("*");
console.log(svg_children);
svgDrawing.addEventListener('pointerdown', e => mouseButtonPressed(e));
svgDrawing.addEventListener('pointerup', e => mouseButtonReleased(e));
svgDrawing.addEventListener('pointermove', e => mouseMove(e));
})
Then I created a function which tests if the box overlaps at least 1 corner of the element's bounding box:
function elementIsInside(el, box){
var result = false;
el_rect = el.getBoundingClientRect();
box_rect = box.getBoundingClientRect();
// console.log("rects_" + el.tagName, el_rect, box_rect)
// console.log("rects_" + el.tagName, el, box)
if (el_rect.right >= box_rect.left && el_rect.right <= box_rect.right
&& el_rect.bottom >= box_rect.top && el_rect.bottom <= box_rect.bottom){
result = true;
} else if (el_rect.left >= box_rect.left && el_rect.left <= box_rect.right
&& el_rect.bottom >= box_rect.top && el_rect.bottom <= box_rect.bottom){
result = true;
} else if (el_rect.right >= box_rect.left && el_rect.right <= box_rect.right
&& el_rect.top >= box_rect.top && el_rect.top <= box_rect.bottom){
result = true;
} else if (el_rect.left >= box_rect.left && el_rect.left <= box_rect.right
&& el_rect.top >= box_rect.top && el_rect.top <= box_rect.bottom){
result = true;
}
// console.log("result_" + el.tagName, result)
return result;
}
And this gets called from your function (and adds or removes the .selected class):
function mouseButtonReleased(evt) {
svgDrawing.style.cursor = null;
if (drawRectToSelect) {
const box = document.querySelector('#temp_selection');
for (i=0; i < svg_children.length; i++){
//svg_children[i].classList.add("selected");
console.log(svg_children[i].tagName)
console.log(svg_children[i].className.baseVal)
child_rect = svg_children[i].getBoundingClientRect();
console.log(child_rect);
//calculate elements inside rectangle
if (elementIsInside(svg_children[i], box )){
if (svg_children[i].className.baseVal.includes('selected')){
} else {
svg_children[i].className.baseVal += " selected";
svg_children[i].className.animVal += " selected";
}
} else {
if (svg_children[i].className.baseVal.includes('selected')){
console.log("true")
svg_children[i].className.baseVal = svg_children[i].className.baseVal.replace(" selected"," ");
svg_children[i].className.animVal = svg_children[i].className.animVal.replace(" selected"," ");
console.log(svg_children[i].className.baseVal);
} else {
console.log("false")
console.log(svg_children[i].className.baseVal);
}
}
}
//Delete selection-rectangle
drawRectToSelect.remove();
drawRectToSelect = null;
}
}

Checking if two points are touching in a hex grid

Some time ago I wrote this fun grid that is offset to look like a hexagonal grid. I added a feature to check if any two points are touching. I thought it was brilliant until I finally found a bug and am not sure how to correct it.
If you press (1,4) and (2,5) you will see that they are "touching" but they shouldn't be. What logic am I missing in the function isTouchingHex?
Found bugs so far..
(1,4) & (2,5)
(2,2) & (3,3)
(0,0) & (1,1)
CodePen
var $point1 = $('#point1');
var $point2 = $('#point2');
var $dx = $('#dx');
var $dy = $('#dy');
var $isTouching = $('#isTouching');
var $table = $('#hexTable');
var table = [];
var rows = 10;
var cols = 5;
var point1 = null;
var point2 = null;
var clickedCount = 0;
for (let y = 0; y < rows; y++) {
var $tr = $('<div class="hexagonRow"></div>')
var row = [];
for (let x = 0; x < cols; x++) {
var $col = $('<div class="hexagon"><div class="hexagonText">' + x + ',' + y + '</div></div>');
$col.click(function() {
if (clickPoint(x, y))
$(this).toggleClass('clicked');
});
$tr.append($col);
row.push(y);
}
$table.append($tr);
table.push(row);
}
function clickPoint(x, y) {
var clicked = true;
if (point1 && point1[0] === x && point1[1] === y) {
point1 = null;
clickedCount--;
} else if (point2 && point2[0] === x && point2[1] === y) {
point2 = null;
clickedCount--;
} else if (!point1 && clickedCount < 3) {
point1 = [x, y];
clickedCount++;
} else if (!point2 && clickedCount < 3) {
point2 = [x, y];
clickedCount++;
} else {
clicked = false;
}
updateDisplay();
return clicked;
}
function updateDisplay() {
if (point1)
$point1.html(point1[0] + ',' + point1[1])
else
$point1.html('');
if (point2)
$point2.html(point2[0] + ',' + point2[1])
else
$point2.html('');
if (point1 && point2) {
var touching = isTouchingHex(point1[0], point1[1], point2[0], point2[1]) ? 'true' : 'false';
$isTouching.html(touching)
} else {
$isTouching.html('');
}
}
function isTouchingHex(x1, y1, x2, y2) {
var deltaX = x1 - x2;
var deltaY = y1 - y2;
$dx.html(deltaX);
$dy.html(deltaY);
// check same x
if (deltaX === 0) {
switch (deltaY) {
// check bottom left
case -1:
// check bottom
case -2:
// check top right
case 1:
// check above
case 2:
return true;
break;
}
} else if (deltaX === 1) {
switch (deltaY) {
// check bottom left
case -1:
// check top left
case 1:
return true;
break;
}
}else if (deltaX === -1) {
switch (deltaY) {
// check bottom right
case -1:
return true;
break;
}
}
return false;
}

How to get an animation to start once in viewport

I have a page that uses the fullpage.js plugin. This plugin allows the user to scroll down and an entire 100%vh screen to appear.
My issue is that I have animations on different sections that I want to delay until that div is within the viewport. It took me a while to figure this out and was trying to do scroll functions, forgetting that fact I am not really scrolling. Before I was trying to do this:
<div id="section1-right-container">
<div id="think"></div>
</div>
$(window).on("scroll", function(){
// Determine if the element is in the viewport
if($('section1-right-container').visible(true)) {
$('section1-right-container').addClass("think");
}
});
I found the following code and modified it some, I am just unsure of how to elimate the scrolling part and to start the animation once the section1-right-container is in the viewport.
// Returns true if the specified element has been scrolled into the viewport.
/*function isElementInViewport(elem) {
var $elem = $(elem);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
/*function checkAnimation() {
var $elem = $('#think');
// If the animation has already been started
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
}
}
Anyone know what I could do?
UPDATE - visible plugin
(function(e) {
e.fn.visible = function(t, n, r) {
var i = e(this).eq(0),
s = i.get(0),
o = e(window),
u = o.scrollTop(),
a = u + o.height(),
f = o.scrollLeft(),
l = f + o.width(),
c = i.offset().top,
h = c + i.height(),
p = i.offset().left,
d = p + i.width(),
v = t === true ? h : c,
m = t === true ? c : h,
g = t === true ? d : p,
y = t === true ? p : d,
b = n === true ? s.offsetWidth * s.offsetHeight : true,
r = r ? r : "both";
if (r === "both") return !!b && m <= a && v >= u && y <= l && g >= f;
else if (r === "vertical") return !!b && m <= a && v >= u;
else if (r === "horizontal") return !!b && y <= l && g >= f
}
})(jQuery)
Why don't you make use of the fullPage.js callbacks such as onLeave or afterLoad?
That's the purpose of them.

drag and drop forms / move forms up and down?

I've used a script for a while, which allows me to drag and drop divs up and down:
<div id="root">
<div style="position: relative;">
<input type="text" name="stuff1" value="TEST1" />
</div>
<div style="position: relative;">
<input type="text" name="stuff1" value="TEST2" />
</div>
<div style="position: relative;">
<input type="text" name="stuff1" value="TEST3" />
</div>
</div>
<script language="javascript">
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) {
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e) {
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e) {
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny, Drag.obj.root);
return false;
},
end : function() {
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode
? "top" : "bottom"]), Drag.obj.root);
Drag.obj = null;
},
fixE : function(e) {
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};
function recalcOffsets () {
var offsets = new Array();
var elems = root.getElementsByTagName("div");
for (var i = 0; i < elems.length; i++) {
Drag.init(elems[i], null, 0, 0, null, null);
elems[i].onDrag = function(x,y,myElem) {
y = myElem.offsetTop;
recalcOffsets();
var pos = whereAmI(myElem);
var elems = root.getElementsByTagName("div");
if (pos != elems.length-1 && y > offsets[pos + 1]) {
root.removeChild(myElem);
root.insertBefore(myElem, elems[pos+1]);
myElem.style["top"] = "0px";
}
if (pos != 0 && y < offsets[pos - 1]) {
root.removeChild(myElem);
root.insertBefore(myElem, elems[pos-1]);
myElem.style["top"] = "0px";
}
};
elems[i].onDragEnd = function(x,y,myElem) {
myElem.style["top"] = "0px";
}
}
var elems = root.getElementsByTagName("div");
for (var i = 0; i < elems.length; i++) {
offsets[i] = elems[i].offsetTop;
}
}
function whereAmI(elem) {
var elems = root.getElementsByTagName("div");
for (var i = 0; i < elems.length; i++) {
if (elems[i] == elem) { return i }
}
}
recalcOffsets()
</script>
Unfortunately, I don't remember where I got this code from (if you happen to recognize it, please do tell and I will add the link).
My problem now is that I want to have forms inside these divs, which the user should be able to edit. Unfortunately, users are unable to do anything with the forms, a side effect I'm sure comes from the fact that the script has to check whether the user is clicking inside the div or not. How can I make the forms editable? Is it even possible with this setup? If it's not possible, I'm fine with having buttons for each div ("up" and "down"), which move the div up and down onclick. I just need to be able to move a div up or down the hierarchy when the user wants it to. How can I accomplish this? What's the best solution?
The problem is the mousedown is being cancalled. You need to check to see what the user is clicking on
Something like this should do it.
start : function(e) {
if( ["input","select","textarea","button"].indexOf(e.target.nodeName.toLowerCase())!=-1) {
return true;
}
/* rest of the code */
You probably have to do something similar for end.

Categories