Question

我正在使用interactjs为屏幕设计创建一个示例，但我在调整大小方面存在问题。当我将盒子的大小调整到两侧的容器边缘时，我不能再缩小盒子了。这是我的问题的示例：http://codepen.io/anon/pen/ORmVZk。
我该如何解决这个问题。谢谢你...

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>

Answer 1

有点晚了，但我遇到了同样的问题。似乎限制边界对于draggable，

的interactjs是破坏的

删除此行然后它应该工作

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

或改为

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

使用交互式js调整问题大小

1 个答案: