Containment so SVGs cannot touch

[alextate4]

For our floorplan, we want to set all items so they cannot move over each other when they touch. Is this possible?

http://colab.web.csit.jccc.edu/

[anseki]

Hi @alextate4, thank you for the comment. This example may help you: https://anseki.github.io/plain-draggable/#ex-040-stage

[alextate4]

I have read this multiple times. I understand how an element can be restricted to an axis, however, I would like all elements to be restricted by their bounding boxes. Do you know how this can be done?

[anseki]

You can do that by using onDrag event handler.

[alextate4]

I created a JSfiddle. I am sorry I am not very experienced but I know what I want to do. Can you help?

`//I want none of the SVG elements to touch each other when moved. I tried an ondrag and it doesn't work. I don't understand how to set the container to the outer bounding box of each element rather than just 1 axis.

var global = $('#masterPlan'); //this doesn't work... var stationary = $('#stationaryObjects'); //this doesn't work...

var moveable = new PlainDraggable(document.getElementById('moveableObjects')); //this doesn't work. all moveable SVGs are in this group

var tealCouch = new PlainDraggable(document.getElementById('southEastCouch-1')); var blueChair = new PlainDraggable(document.getElementById('blueChair-1')); var blueStool = new PlainDraggable(document.getElementById('blueStool-1')); var blackChair = new PlainDraggable(document.getElementById('blackChair-1')); var greenChair = new PlainDraggable(document.getElementById('greenLowChair-1'));

/ document.addEventListener("ondrag", function(event) { greenLowChair.style.fill = "red"; }); /

moveable.containment = {left: 20, top: 20, width: 800, height: 0}; //This doesn't work. Can everything in this moveable group be called??

/ blueChair.containment = {left: 20, top: 20, width: 800, height: 0}; blueStool.containment = {left: 20, top: 20, width: 800, height: 0}; blackChair.containment = {left: 20, top: 20, width: 800, height: 0}; greenChair.containment = {left: 20, top: 20, width: 800, height: 0}; / //these work but very tedious.

tealCouch.containment = {left: 20, top: 20, width: 800, height: 0}; //this works, but it is not going to do what I want. I want the outer box of every SVG to be a container.

$('#blackChair').on('drag', function(e) { blackChair.containment = {left: 20, top: 20, width: 800, height: 0}; }); //this doesn't seem to be working. I also do not understand how to set the containment to only the outer bound box..

document.addEventListener("ondrag", function(e) { tealCouch.containment = {left: 20, top: 20, width: 800, height: 0}; }); //does nothing....`

https://jsfiddle.net/atate4/efoat4L3/85/

Thank you!

[anseki]

Could you explain the issue? Do you mean that the document.addEventListener("ondrag"... doesn't work?

[alextate4]

I want to write code to prevent all objects from touching one another. They should stop as soon as they collide. I do not know how to do this.

The teal couch is represented by the teal box on the left...

HTML for teal couch SVG: <rect id="southEastCouch-1" class="southEastCouch drag-svg item" x="4.8" y="334" fill="#0094B3" width="34" height="15.5" />

Plain-draggable on the couch: var tealCouch = new PlainDraggable(document.getElementById('southEastCouch-1'));

Setting the constraints on the outer box of the svg ?? document.addEventListener("ondrag", function(e) { tealCouch.containment = //I don't know what to do here.. });

I would like these constraints to be set on all objects of the floor plan so that nothing can collide.

Here is the full layout for the floor plan: http://colab.web.csit.jccc.edu/

The fiddle is just a playground that includes only a few items on the entire floor plan: https://jsfiddle.net/atate4/efoat4L3/107/

[anseki]

Could you explain the issue about your code? Do you mean that the document.addEventListener("ondrag"... doesn't work?

[anseki]

I don't know what your code means. Anyway, this example may help you: https://jsfiddle.net/tfn4sb1o/

[alextate4]

This has helped me so much! Thank you!

[anseki]

:smile: