Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [Homework] Simple Image Dragging
New Posts  All Forums:Forum Nav:

[Homework] Simple Image Dragging

post #1 of 3
Thread Starter 
Hi all. I have an assignment to make a page that allows me to drag two images around a screen using absolute positioning. I have it almost completely working, except for one requirement. They want me to be able to drag two images at the same time if they are overlapped and I click on the overlapped location. I could use some tips on getting the overlap dragging to work.

I was going to upload it to jsfiddle, but I can't seem to get it to work; I think it's because I register callbacks to the document object, which probably doesn't play nice with their environment.

It's pretty ugly and not robust, but it'll work.
HTML (Click to show)
<!DOCTYPE html>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="script.js"></script>
        <img id="flowerimg" src="flowers.jpg" alt="flowers">
        <img id="colorimg" src="colors.jpg" alt="colors">
CSS (Click to show)
#flowerimg {
    position: absolute;
    left: 10px;
    top: 10px;

#colorimg {
    position: absolute;
    left: 100px;
    top: 10px;
JS (Click to show)
var $ = function (id) {
        return document.getElementById(id);

var selected = null;
var offsetX;
var offsetY;

var top_z = 5;

var handleDown = function(e) {
    selected = e.target;
    offsetX = e.clientX;
    offsetY = e.clientY;
    coordX = parseInt(selected.style.left);
    coordY = parseInt(selected.style.top);

    selected.style.zIndex = top_z++;

    document.onmousemove = handleMove;
    return false;

var handleUp = function(e) {
    selected = null;
    document.onmousemove = null;

var handleMove = function(e) {
    if (selected) {
        selected.style.left = coordX + e.clientX - offsetX +'px';
        selected.style.top  = coordY + e.clientY - offsetY +'px';
    return false;

window.onload = function () {

    /* For some reason, the elements for the two images weren't getting the attribs 
        loaded into the element, so I have to make sure they're set explicitly beforehand
    $('flowerimg').style.left = '10px';
    $('flowerimg').style.top = '10px';
    $('colorimg').style.left = '100px';
    $('colorimg').style.top = '10px';

    document.onmousedown = handleDown;
    document.onmouseup = handleUp;
post #2 of 3
There's several ways to do this. I'll discuss a fairly easy one that should perform well if you have only a few items. I happened (with the help of google) to find a picture that perfectly summed up the geometry of your problem.

You can calculate the area covered by each html block (in this case ) by finding the left and top offsets and then adding the height or width as needed.
For example
left_offset = 80px
top_offset = 100px
width = 220px
height = 130px

Our box takes up the area from 80px to 300px horizontally and from 100px to 230px vertically. Any time a user click within that space, your image needs to be selected.

When a user clicks on the page, you should trigger an event. Contained in that event will be the left and top offset. We'll call them mouse_left and mouse_top. If we abstract away our specific numbers, we're left with:
if ( (mouse_left > left_offset && mouse_left < (left_offset + width)) && (mouse_top > top_offset && mouse_top > (top_offset + height)) )
then the mouse has been clicked over the image

EACH time the user clicks the page, you must check EVERY picture to see if the mouse is inside it. If so it is selected to be dragged and the drag event will now affect any number of images (any image that overlaps the clicked point as you should be able to see in the picture above if you were to click the shared area). The issue here (as alluded to above) is that the DOM makes this less than performant. I wouldn't want to use it for more than a few hundred items (which probably isn't a deal with pictures anyway though as a few hundred pictures will already have the layout engine starting to complain).
Edited by hajile - 10/15/13 at 8:55pm
post #3 of 3
Thread Starter 
Originally Posted by hajile View Post


Bah, so the "easy option" is to do "dumb" collision detection. (not really collision, but best analogy I can think of). I'm hoping to do something smarter, just for the sake of learning it. Maybe something with propagating the click down, or selecting by Z-Index.

Thanks for the quick response. This will be my last resort. smile.gif
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [Homework] Simple Image Dragging