0

I have JSON which defines set of pictures. 

pictures[{picutreName:"pic1", prio:1},
         {picutreName:"pic2", prio:2},
         {picutreName:"pic3", prio:3},
         {picutreName:"pic4", prio:4},
         {picutreName:"pic5", prio:5},
         {picutreName:"pic6", prio:6}
        ]

according to "prio" are pictured ordered (prio:1 is displayed first, prio:6 is last). By "draggable" I would like to change prio of each img element. For instance pic6 should show up before pic1. Can someone advise the logic for "ondragend" which handles the prio correctly? I was trying to setup based on X/Y positions, but for that I would have drag each img first to get the X/Y

Dale K
  • 25,246
  • 15
  • 42
  • 71
Adam
  • 13
  • 3
  • I'm not really sure what you mean but you could use ```array.sort``` and sort the array on basis of X/Y position and then use ```array.map``` to change the value of ```prio``` based on the index of array the pictures are positioned at? – aaKhan Dec 02 '19 at 13:44
  • Ok, at the beginning all imgs from the array are listed in a box and I don't know how to detect their X/Y coordinates without any action related to "ondragX". How can I determine position of each img element in a box in comdponentDidMount()? The array can be than sortex based on X and Y in order to reorder imgs – Adam Dec 02 '19 at 14:43

1 Answers1

0

I'm assuming that by "draggable," you mean that the user can click and drag a picture, and it will jump to a new position?

You'll want to look into event listeners-- specifically onMouseDown-- and MouseEvent clientX/Y events. The 'easiest' way that I know to do this would be to use onMouseEnter and onMouseLeave events. Whenever the user mouses over one of your divs, trigger a function that will store their priority/x and y positions in the state. When they exit a div, remove the stored information from your state. Then, when you detect the user putting the mouse button down, check if you have a priority in the state.

If the user wasn't hovering over one of your pictures when they clicked, then you don't care about it, and you don't need to do anything. If the user was hovering over one of the pictures when they clicked, then check where the user's mouse is on mouse button up. Re-order your priorities based upon that.

So far as getting the x and y coordinates of your element, you can use Element.getBoundingClientRect()

Hope that helps. Please comment if anything is unclear.

NegativeFriction
  • 527
  • 2
  • 14
  • Thx for the answer. Unfortunatelly I am unable to understand. Let's say I list via array.map list of div / images. Each div has onDragstart, onDragstop. There are 6 images. Let's imagine as table 2x3. If I will "mouseover" only above 6th(last) image and will start the dragging to the position of 4th image how can I determine X/Y of 4th image since i didn't mouseover so the detection of current position of 4th wasn't triggered? – Adam Dec 04 '19 at 10:02
  • I'm assuming that each component in this list is going to be its own react component. You can use an array.map prototype to display each of the images initially, and you can give each image element a callback function to call on component did mount, which will tell you the data from getBoundingClientRect. Pass that back to your parent element, and then you can compare where the user released the element to where your other elements are. – NegativeFriction Dec 04 '19 at 13:02