I'm creating an example for screen design with interactjs but I have problem with resizing. when I resize my box to the edge of the container in both side, I cannot shrink the box anymore. here is the example of my problem: http://codepen.io/anon/pen/ORmVZk.
How can i fix this.Thank you...
js:
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
var klas=0;
addDiv = function(el){
var cls="div-"+klas;
var color = getRandomColor();
$(".designScreenContainer").append("<div class='dBox "+cls+" "+el+"' style='background-color:"+color+"'></div>");
interact("."+cls)
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
onmove: window.dragMoveListener,
snap: {
targets: [
interact.createSnapGrid({ x: 5, y: 5 })
],
range: Infinity,
relativePoints: [ { x: 0, y: 0 } ]
},
})
.resizable({
// preserveAspectRatio: true,
edges: { left: true, right: true, bottom: true, top: true },
restrict: {
// endOnly: true,
restriction: '.designScreenContainer',
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
}
})
.on('resizemove', function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height);
});
klas++;
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
html:
<div class="row">
<div class="col s9 designScreenContainer grey darken-4" style="height:200px;margin:10px auto;float:none;"></div>
</div>
<button onclick="addDiv()">Add New Box</button>
