akhildevelops/eyyjdwq.markdown

## eyyjdwq.markdown

      
    Raw
  

              eyyjdwq.markdown
            
          
    eYyJdWQ

A Pen by Akhil a.k.a Enforcer007 on CodePen.
License.

  
## index.html
<html>

<body>
    <div class="main">
        <div>
            Hello
        </div>
        <div class="centre">
            <div id="canvas">
                <div id="second" class="moveable">
                </div>
                <div id="first" class="moveable">
                </div>
                <div id="third" class="moveable">
                    <img src="https://avatars.githubusercontent.com/u/6951100?s=40&amp;v=4" alt="@Enforcer007">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

## script.js
const frameMap = new Map();
let targets = [];
const container = document.getElementById("canvas");
const selecto = new Selecto({
    container,
    selectableTargets: [".moveable"],
    hitRate: 100,
    selectByClick: true,
    selectFromInside: true
});
const moveable = new Moveable(container, {
    draggable: true,
    rotatable: true,
    resizable: true
})
    .on("dragStart", (e) => {
        const target = e.target;

        if (!frameMap.has(target)) {
            frameMap.set(target, {
                translate: [0, 0]
            });
        }
        const frame = frameMap.get(target);

        e.set(frame.translate);
    })
    .on("drag", (e) => {
        const target = e.target;
        const frame = frameMap.get(target);

        frame.translate = e.beforeTranslate;
        target.style.transform = `translate(${frame.translate[0]}px, ${frame.translate[1]}px)`;
    })
    .on("dragGroupStart", (e) => {
        e.events.forEach((ev) => {
            const target = ev.target;

            if (!frameMap.has(target)) {
                frameMap.set(target, {
                    translate: [0, 0]
                });
            }
            const frame = frameMap.get(target);

            ev.set(frame.translate);
        });
    })
    .on("dragGroup", (e) => {
        e.events.forEach((ev) => {
            const target = ev.target;
            const frame = frameMap.get(target);

            frame.translate = ev.beforeTranslate;
            target.style.transform = `translate(${frame.translate[0]}px, ${frame.translate[1]}px)`;
        });
    })
    .on("rotate", (e) => {
        e.target.style.transform = e.transform;
    })
    .on(
        "resize",
        ({ target, width, height, dist, delta, clientX, clientY }) => {
            delta[0] && (target.style.width = `${width}px`);
            delta[1] && (target.style.height = `${height}px`);
        }
    );

selecto
    .on("dragStart", (e) => {
        const target = e.inputEvent.target;
        if (
            moveable.isMoveableElement(target) ||
            targets.some((t) => t === target || t.contains(target))
        ) {
            e.stop();
        }
    })
    .on("selectEnd", (e) => {
        targets = e.selected;
        moveable.target = targets;

        if (e.isDragStart) {
            e.inputEvent.preventDefault();

            setTimeout(() => {
                moveable.dragStart(e.inputEvent);
            });
        }
    });

## scripts
<script src="https://daybrush.com/selecto/release/latest/dist/selecto.js"></script>
<script src="https://daybrush.com/moveable/release/latest/dist/moveable.js"></script>

## style.css
body {
    background-color: black;
    color: wheat;
}

.centre {
    display: flex;
    justify-content: center;
}
#canvas {
    position: relative;
    border: 3px solid #734565;
    width: 50%;
    height: 300px;
    overflow: hidden;
}

#first {
    position: absolute;
    width: 100px;
    left: 10px;
    top: 10px;
    height: 200px;
    border: 1px solid #ab7854;
    background-color: blue;
}
#second {
    position: absolute;
    border: 1px solid #cd67ef;
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    background-color: green;
}
#third {
    position: absolute;
    left: 200px;
    width: 200px;
}
img {
    position: relative;
    width: 100%;
    height: 100%;
    /*     z-index: -1; */
}

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}
	<html>

	<body>
	<div class="main">
	<div>
	Hello
	</div>
	<div class="centre">
	<div id="canvas">
	<div id="second" class="moveable">
	</div>
	<div id="first" class="moveable">
	</div>
	<div id="third" class="moveable">
	<img src="https://avatars.githubusercontent.com/u/6951100?s=40&v=4" alt="@Enforcer007">
	</div>
	</div>
	</div>
	</div>
	</body>

	</html>
	const frameMap = new Map();
	let targets = [];
	const container = document.getElementById("canvas");
	const selecto = new Selecto({
	container,
	selectableTargets: [".moveable"],
	hitRate: 100,
	selectByClick: true,
	selectFromInside: true
	});
	const moveable = new Moveable(container, {
	draggable: true,
	rotatable: true,
	resizable: true
	})
	.on("dragStart", (e) => {
	const target = e.target;

	if (!frameMap.has(target)) {
	frameMap.set(target, {
	translate: [0, 0]
	});
	}
	const frame = frameMap.get(target);

	e.set(frame.translate);
	})
	.on("drag", (e) => {
	const target = e.target;
	const frame = frameMap.get(target);

	frame.translate = e.beforeTranslate;
	target.style.transform = `translate(${frame.translate[0]}px, ${frame.translate[1]}px)`;
	})
	.on("dragGroupStart", (e) => {
	e.events.forEach((ev) => {
	const target = ev.target;

	if (!frameMap.has(target)) {
	frameMap.set(target, {
	translate: [0, 0]
	});
	}
	const frame = frameMap.get(target);

	ev.set(frame.translate);
	});
	})
	.on("dragGroup", (e) => {
	e.events.forEach((ev) => {
	const target = ev.target;
	const frame = frameMap.get(target);

	frame.translate = ev.beforeTranslate;
	target.style.transform = `translate(${frame.translate[0]}px, ${frame.translate[1]}px)`;
	});
	})
	.on("rotate", (e) => {
	e.target.style.transform = e.transform;
	})
	.on(
	"resize",
	({ target, width, height, dist, delta, clientX, clientY }) => {
	delta[0] && (target.style.width = `${width}px`);
	delta[1] && (target.style.height = `${height}px`);
	}
	);

	selecto
	.on("dragStart", (e) => {
	const target = e.inputEvent.target;
	if (
	moveable.isMoveableElement(target) \|\|
	targets.some((t) => t === target \|\| t.contains(target))
	) {
	e.stop();
	}
	})
	.on("selectEnd", (e) => {
	targets = e.selected;
	moveable.target = targets;

	if (e.isDragStart) {
	e.inputEvent.preventDefault();

	setTimeout(() => {
	moveable.dragStart(e.inputEvent);
	});
	}
	});
	<script src="https://daybrush.com/selecto/release/latest/dist/selecto.js"></script>
	<script src="https://daybrush.com/moveable/release/latest/dist/moveable.js"></script>
	body {
	background-color: black;
	color: wheat;
	}

	.centre {
	display: flex;
	justify-content: center;
	}
	#canvas {
	position: relative;
	border: 3px solid #734565;
	width: 50%;
	height: 300px;
	overflow: hidden;
	}

	#first {
	position: absolute;
	width: 100px;
	left: 10px;
	top: 10px;
	height: 200px;
	border: 1px solid #ab7854;
	background-color: blue;
	}
	#second {
	position: absolute;
	border: 1px solid #cd67ef;
	width: 100px;
	height: 100px;
	left: 50px;
	top: 50px;
	background-color: green;
	}
	#third {
	position: absolute;
	left: 200px;
	width: 200px;
	}
	img {
	position: relative;
	width: 100%;
	height: 100%;
	/* z-index: -1; */
	}

	.noSelect {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	.noSelect:focus {
	outline: none !important;
	}