javascript - 同一元素的可拖动和可调整大小问题

Question

我一直在研究 jQuery 的可拖动和可调整大小的插件，但最近遇到了一个问题。我尝试在以下 fiddle 上复制这种情况:

$('.event').draggable({
grid: [120, 12],
cursor: 'move',
containment: '#container',
start: function (event, ui) {
    console.log("event dragging started");
}
}).resizable({
containment: 'parent',
grid: 12,
handles: {
    'n': '#ngrip',
        's': '#egrip'
},
start: function (e, ui) {
    console.log('resizing started');
},

});

这是a fiddle .

可调整大小的南 handle 根本不起作用，北 handle 也发生了奇怪的事情 -> 它减小了我的 div 的大小，并将其快速推到右侧。我做错了什么？

Answer 1

您的代码:

$('.event').draggable({
    grid: [120, 12],
    cursor: 'move',
    containment: '#container',
    start: function (event, ui) {
        console.log("event dragging started");
    }
}).resizable({
    containment: 'parent',
    grid: 12,
    handles: {
        'n': '#ngrip',
            's': '#egrip'
    },
    start: function (e, ui) {
        console.log('resizing started');
    },

});

需要代码

$('.event').draggable({
    grid: [120, 12],
    cursor: 'move',
    containment: '#container'
}).resizable({
    containment: 'parent',
    grid: [ 120, 12 ],
    handles: "n, e, s, w"

});

1) 删除末尾的逗号2) 将句柄设置为handles: "n, e, s, w" 但此后仍然存在一些错误，您只能在拖动一次后调整大小，并从像素精确调整工作大小，也许是因为您正在使用自定义调整大小处理程序，我不确定。阅读documentation以获得更多帮助。

新代码

$('.event').draggable({
    cursor: 'move',
    containment: '#container'
}).resizable({
    containment: '#container',
    handles:"n, e, s, w",
    start: function (e, ui) {
        console.log('resizing started');
    }
});