Javascript draggable item + item resizing with window size

[marianordtveit]

I have several items that needs to be draggable. This I have figured out, I have made a div for each element inside a container, and every item within the container is draggable. I had to have the item in the css file, so it would be draggable in the right way (it wouldn’t let go unless I pressed the mousepad once more, not very user friendly) when I had it as an img src within the div. My problem now is that the items will not resize with the window. I need it to have a max-width and to be 60% of the window. It will not become smaller when the window gets smaller.

In the html file:

<div id="containerElement1">
<div id="element1"></div>
</div>

There are also a container around all the elements, named containerElement.

This is the javascript:

var container = document.querySelector("#containerElement");
   var activeItem = null;

   var active = false;

   container.addEventListener("touchstart", dragStart, false);
   container.addEventListener("touchend", dragEnd, false);
   container.addEventListener("touchmove", drag, false);

   container.addEventListener("mousedown", dragStart, false);
   container.addEventListener("mouseup", dragEnd, false);
   container.addEventListener("mousemove", drag, false);

   function dragStart(e) {

     if (e.target !== e.currentTarget) {
       active = true;

       // this is the item we are interacting with
       activeItem = e.target;

       if (activeItem !== null) {
         if (!activeItem.xOffset) {
           activeItem.xOffset = 0;
         }

         if (!activeItem.yOffset) {
           activeItem.yOffset = 0;
         }

         if (e.type === "touchstart") {
           activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
           activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
         } else {
           console.log("doing something!");
           activeItem.initialX = e.clientX - activeItem.xOffset;
           activeItem.initialY = e.clientY - activeItem.yOffset;
         }
       }
     }
   }

   function dragEnd(e) {
     if (activeItem !== null) {
       activeItem.initialX = activeItem.currentX;
       activeItem.initialY = activeItem.currentY;
     }

     active = false;
     activeItem = null;
   }

   function drag(e) {
     if (active) {
       if (e.type === "touchmove") {
         e.preventDefault();

         activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
         activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
       } else {
         activeItem.currentX = e.clientX - activeItem.initialX;
         activeItem.currentY = e.clientY - activeItem.initialY;
       }

       activeItem.xOffset = activeItem.currentX;
       activeItem.yOffset = activeItem.currentY;

       setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
     }
   }

   function setTranslate(xPos, yPos, el) {
     el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
   }


In CSS it looks like this:
#containerElement1 {
  position: relative;
  max-width: 363px;
  max-height: 139px;
  width: 60%;
  height: auto;
}

#element1 {
  background-image: url(illustrasjon/nase1.png);
  display: block;
  width: 100%;
  height: auto;
}

I tried several things in the CSS-file, sometimes the item doesn’t show, and sometimes it shows, but it doesn’t scale.

Appreciate all help I can get

[marianordtveit]

I’m sorry, this is how it looks in the CSS-file when the element shows, but doesn’t scale:

#containerElement1 {
  position: relative;
  max-width: 363px;
  max-height: 139px;
  width: 60%;
  height: auto;
}

#element1 {
  background-image: url(illustrasjon/nase1.png);
  display: block;
  width: 263px;
  height: 139px;
}

[PaulOB]

@marianordtveit

, but doesn’t scale:

You’ve given #element1 a fixed height and width so it can’t possibly scale. It will always be 263px x 139px.

Assuming your #containerElement1 is correct then that parent container will never be bigger than 363px x 139px. However when 60% equates to less than 363px the parent will indeed get smaller than 363px but never larger. The inner (#element1) however will never change.

It is unclear whether the behaviour for the parent is what you wanted so I’m loathe to offer solutions but assuming that that #containerElement1 is what you intended you could allow #element1 to mimic an image using the intrinsic ratio behaviour hack as follows.

#containerElement1 {
	position: relative;
	max-width: 363px;
	max-height: 139px;
	width: 60%;
	height: auto;
}
#element1 {
	background: url(illustrasjon/nase1.png) no-repeat 50%;
	background-size:cover;
	display:table;
	width:100%;
}
#element1:before {
	content: "";
	width: 0;
	overflow:hidden;
	margin-left:-1px;
	float: left;
	padding-top: 38.29%;/* this creates an intrinsic aspect ratio - adjust to suit */
}

However it may be better if you roll all your working code into a codepen so we can see first hand what we are dealing with

[marianordtveit]

Thank you so much for looking at it, I will try this solution out!

Here is the webpage: http://folk.ntnu.no/manordt/wu1/Heimeside/framside.html

The code is a bit messy now because I have been trying out different things But the first element is the one I can’t get to scale properly (id=“element1”). The other elements on the page is how it looks when the file is in the html document. Then it doesn’t drag properly.

[PaulOB]

@marianordtveit

Here is the webpage: http://folk.ntnu.no/manordt/wu1/Heimeside/framside.html

Unfortunately that is going to be very difficult to make responsive because you are absolutely placing the elements into fixed positions. You would need to change their positioning to be based on the available width (e.g. use percentages) so that they move as the window is resized and then can scale with the available width to some degree.

At present they are placed a fixed pixel distance from the browsers edge which means they can never move.

Perhaps this would have been better in SVG but beyond my skills.

[marianordtveit]

Thank you so much for looking at it