Question

我一直在研究有关可拖动的＆amp; amp;来自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');
},

}）;

这是a fiddle。

可调整大小的南方手柄根本不起作用，北方手柄也发生了奇怪的事情 - ＆gt;它减小了我的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');
    }
});

Answer 2

您可以查看此链接。解决问题很有用

    http://viralpatel.net/blogs/jquery-resizable-draggable-resize-drag-tutorial-example/

Answer 3

试试这段代码。 Jquery的

    $(document).ready(function (){
       $('.blue').resizable();
       $(".blue").draggable();
    });

HTML

    <div id="container">
       <div class="column">
          <div class="event blue">
           </div>
       </div>
        <div class="column">
          <div class="event dark-blue blue"  id="event" style="margin-top:3px">
          </div>
        </div>
     </div>

附加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"/>

Answer 4

尝试使用此代码，我认为这会对您有所帮助

HTML：

<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>

jquery的：

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

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

Answer 5

修复它。请查看它。

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

});

将可调整大小的收容从parent更改为#container，将南方处理名称从#egrip更改为#sgrip。没别的。

检查小提琴here。

同一元素的draggable和resizable问题

5 个答案: