javascript zoom and drag multiple images within div. got some code but cant get to an end

Question

i have this code https://jsfiddle.net/j8kLz6wm/1/

when i add another image it does not work

 <img ondragstart="return false" id="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />

and it nicely does what i need,

but i cannot get my head around how to have multiple images in this div which all can be moved freely.

i want to be able to make collages with multiple images.

thanks for any help

webdev778 · Answer 1 · 2019-11-15T20:11:49.060

0

I've just gone with your codebase. I think the image url is wrong. it working well with this url https://via.placeholder.com/150. I think you have to check your image url.

You can use classname instead of id to handle this issue.

    <div id="container">
      <img ondragstart="return false" class="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
      <img ondragstart="return false" class="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
    </div>

And add addEventListener to each items

  var items = document.getElementsByClassName('drag-img');
  for (let item of items) {
    item.addEventListener(event_start, start_drag);
  }

here is the codebase. https://jsfiddle.net/jsdev778/5myvsxzw/21

Hope this help you.

edited Nov 15 '19 at 20:11

answered Nov 15 '19 at 19:18

webdev778

51
1
8

yes, with one image it works nice, but multiple images dont :( – Mark Walser Nov 15 '19 at 19:32
please check this url. https://jsfiddle.net/jsdev778/5myvsxzw/21/ – webdev778 Nov 15 '19 at 20:05
wow this is beautiful. i tried with class but your way of putting items through a loop could not do that. – Mark Walser Nov 15 '19 at 20:28
now i gotta figure out how to get these zoomin zoomout buttons to work as they are also on the div-id – Mark Walser Nov 15 '19 at 20:28
I didn't get you what you couldn't, just checked on my side and it works, could you elaborate on it? – webdev778 Nov 15 '19 at 20:29
oh, I see, zoomin, zoomout issue, it's like you can go in same way. – webdev778 Nov 15 '19 at 20:30
you think ontouch change element id to drag-img so the zoom buttons correspond to the touched image? – Mark Walser Nov 15 '19 at 20:35
got your question. definitely, you know, you can't deal with this issue only with id, you can use data-attributes for identifying the specific item which touched – webdev778 Nov 15 '19 at 20:38
thanks a lot, i got it by using a hidden form: https://jsfiddle.net/3bmptwzk/ i upvoted you ofcourse, but it doesnt show up since i am new user – Mark Walser Nov 15 '19 at 21:07

javascript zoom and drag multiple images within div. got some code but cant get to an end

1 Answers1