调整大小问题与交互js

Question

我创建一个与interactjs的屏幕设计的例子，但我有调整大小的问题。当我将箱子重新调整到两侧的容器边缘时，我再也无法收缩箱子了。这里是我的问题的例子：http://codepen.io/anon/pen/ORmVZk。
如何解决this.Thank你...

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 = 'ABCDEF'.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> 

Answer 1

有点晚了，但在这里我遇到了同样的问题。看来，限制界限为interactjs用于拖动打破，

删除这一行那么它应该工作

elementRect: { top: 0, left: 0, bottom: 1, right: 1 } 

或更改

elementRect: { top: 1, left: 1, bottom: 1, right: 1 }