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

我一直在研究jQuery中的可拖动和可调整大小的插件，但最近遇到了一个问题。我试着在下面的小提琴上复制这种情况：

$('.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');
},

}))

给你

---

可调整大小的南把手根本不起作用，而且奇怪的事情发生在北把手上->它减小了我的div的大小，并将其快速向右推。我做错了什么？

您的代码：

$('.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） 将句柄设置为

句柄：“n，e，s，w”

但在这之后仍然有一些bug，你只能在从一次拖动后调整大小，并精确地从一个像素调整大小，可能是因为你正在使用自定义的调整大小处理程序，我不确定。阅读更多帮助

新代码

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

试试这个代码。 Jquery

Html

附加jquery文件

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

---

试试这段代码，我想这会对你有帮助

Html:

---

修好它。请复习一下

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

});

将可调整大小的容器从父容器更改为容器，将南把手名称从egrip更改为sgrip。没有别的了

---

检查fiddle。

我认为它和逗号事件以及自定义句柄无关。我已经应用了您的建议，但仍然是相同的错误行为：我检查了您的代码，但移动第二列事件的顶部句柄会立即将其移出屏幕。还有一件事我以前没有提到，但是已经存在了——可调整大小的容器没有得到适当的尊重，我可以在它的容器外调整我的div的大小。你可以删除网格检查一下：不知何故，网格使可拖动的事件正好在边界之后，这也是我观察到的。不幸的是，我需要这个网格。你可以检查这个链接：但问题是，当你提供的网格大于容器高度时，它超出了容器高度，你就会出现溢出错误，所以试着给出一个更小的网格。是的，用这个简单的代码，一切都可以工作，因为我认为这个问题是由使用网格选项引起的，所以不能解决我的问题。在我调试了你的代码之后，发现了一些东西。你打错s手柄了吗#egrip或#sgrip？我发现如果我将网格更新到18或更多，它就可以正常工作。我建议您下载jquery.ui的调试版本。尝试调试调整大小事件句柄。我相信这会有帮助的。

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

<div id="container">
 <div class="column">
    <div class="event blue">
        <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
        <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    </div>
    <div class="column">
    <div class="event dark-blue"  id="event" style="margin-top:3px">
        <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
        <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    </div>
</div>
 </div>
</div> 

    $(document).ready(function (){
     $('.blue').resizable({
           handles: {
               's': '#sgrip',
                'w': '#wgrip'
            }
         });
        $('.dark-blue').resizable({
        handles: {
           's': '#sgrip',
            'w': '#wgrip'
          }

      });
    $(".column").draggable();
   });

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

});