เลือกแผน 4-3-3
- 111111.png (3.85 KiB) Viewed 1683 times
โค้ด: เลือกทั้งหมด
<style>
.draggable {
width: 5%;
height: 2%;
background-color: black;
color: white;
/* border-radius: 0.75em; */
padding: 2%;
position: absolute;
}
.drag-container {
display: inline-block;
width: 700px;
height: 700px;
border: 1px solid black;
}
</style>โค้ด: เลือกทั้งหมด
<div class="drag-container" align="center" >
<div class="draggable" style="transform: translate(300px, 630px);" data-x="300" data-y="630">
<p>Block 1</p>
</div>
<div class="draggable" style="transform: translate(20px, 500px);" data-x="20" data-y="500">
<p>Block 2</p>
</div>
<div class="draggable" style="transform: translate(200px, 500px);" data-x="200" data-y="500">
<p>Block 3</p>
</div>
<div class="draggable" style="transform: translate(400px, 500px);" data-x="400" data-y="500">
<p>Block 4</p>
</div>
<div class="draggable" style="transform: translate(580px, 500px);" data-x="580" data-y="500">
<p>Block 5</p>
</div>
<div class="draggable" style="transform: translate(110px, 300px);" data-x="110" data-y="300">
<p>Block 6</p>
</div>
<div class="draggable" style="transform: translate(300px, 300px);" data-x="300" data-y="300">
<p>Block 7</p>
</div>
<div class="draggable" style="transform: translate(490px, 300px);" data-x="490" data-y="300">
<p>Block 8</p>
</div>
<div class="draggable" style="transform: translate(110px, 100px);" data-x="110" data-y="100">
<p>Block 9</p>
</div>
<div class="draggable" style="transform: translate(300px, 100px);" data-x="300" data-y="100">
<p>Block 10</p>
</div>
<div class="draggable" style="transform: translate(490px, 100px);" data-x="490" data-y="100">
<p>Block 11</p>
</div>
</div>
โค้ด: เลือกทั้งหมด
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script type="text/javascript">
interact('.draggable').draggable({
autoScroll: true,
onmove: window.dragMoveListener,
restrict: {
restriction: 'parent',
elementRect: {
top: 0,
left: 0,
bottom: 1,
right: 1
}
},
onmove: function (event) {
var target = event.target;
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
});
</script>
