Question

我试图允许排序长度较高的物品。对象的高度可能比用户屏幕更高，这将使得单击和拖动项目变得困难（并且仍然概述项目的内容。

我设计了一个简单的计划，可以在开始拖动时更改项目的缩放级别，但这似乎无法正常工作。

请参阅JSFiddle并尝试移动块以查看问题：http://jsfiddle.net/sh4zx63w/7/

$('#container ul').sortable({
    revert: true,
    placeholder: "dropstyle",
    start: function (evt, ui) {
        pointerY = (evt.pageY - $('#container').offset().top) / zoom - parseInt($(evt.target).css('top'));
        pointerX = (evt.pageX - $('#container').offset().left) / zoom - parseInt($(evt.target).css('left'));
    },
    beforeStop: function (event, ui) {
        $('#container').css({
            zoom: 1,
            'overflow': 'none',
            'height': 'auto'
        })
    },
    drag: function (evt, ui) {
        var canvasTop = $('').offset().top;
        var canvasLeft = $('#container').offset().left;
        var canvasHeight = $('#container').height();
        var canvasWidth = $('#container').width();

        // Fix for zoom
        ui.position.top = Math.round((evt.pageY - canvasTop) / zoom - pointerY);
        ui.position.left = Math.round((evt.pageX - canvasLeft) / zoom - pointerX);

        // Check if element is outside canvas
        if (ui.position.left < 0) ui.position.left = 0;
        if (ui.position.left + $(this).width() > canvasWidth) ui.position.left = canvasWidth - $(this).width();
        if (ui.position.top < 0) ui.position.top = 0;
        if (ui.position.top + $(this).height() > canvasHeight) ui.position.top = canvasHeight - $(this).height();

        // Finally, make sure offset aligns with position
        ui.offset.top = Math.round(ui.position.top + canvasTop);
        ui.offset.left = Math.round(ui.position.left + canvasLeft);
    }
});

我在Firefox，Chrome和Internet Explorer上尝试过点击和拖动，所有这些都无法正常工作。

在Chrome和Internet Explorer中，无法拖动棕色框（第一个框），如果要按下框，则需要向上移动较小的框。

Firefox更好，但它仍有问题，尝试将棕色框拖到底部时可以看到。拖动较小的框似乎效果更好。

jQuery UI Draggable：在dragStart上使用CSS缩放项目时，正确地让鼠标跟随可排序的项目

0 个答案: