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

我一直在做一些关于可拖动的& 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。

可调整大小的南方手柄完全不起作用，北方手柄也发生了奇怪的事情 - >它减小了我的div大小，并将其迅速推向右侧。我究竟做错了什么？

来源

2014-02-20 Flasz

当我调试你的代码后，发现了一些东西。你错了那个手柄吗？ #egrip或#sgrip？ –

我发现如果我更新网格到18或更多，它工作正常。 –

我建议你下载jquery.ui的调试版本。尝试调试resize事件句柄。我相信这会有所帮助。 –

您的代码：

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

来源

2014-02-20 07:23:52 Alex

我认为它与逗号以及自定义句柄无关。我已经应用了你的建议，它仍然是相同的，错误的行为：http://jsfiddle.net/flaszer/M2umR/8/ – Flasz

我已经检查你的代码，仍然移动第二列事件的顶级句柄立即移动它的屏幕。还有一些我之前没有提到但存在的东西 - 可调整大小的容器没有得到适当的尊重，我可以调整容器外的div大小。 – Flasz

你可以删除网格检查：http://jsfiddle.net/M2umR/9/ 不知何故网格正在使可拖动事件在约束后向右移动 – Alex

您可以点击此链接。这将是有用的为您解决问题

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

来源

2014-02-20 06:58:59 Preet

我想为我的小提琴示例收集一些信息，究竟是什么错误，而不是看另一个教程如何做到这一点，相对容易的事情。 – Flasz

试试这个代码。 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"/>

来源

2014-02-20 07:54:20 Preet

是的，用这个简单的代码一切都会工作，因为我认为这个问题是由使用网格选项造成的，所以不能解决我的问题。 – Flasz

试试这个代码我认为这会有所帮助你

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(); 
    });

来源

2014-02-20 10:08:45 Preet

修复它。请检查它。

$('.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。

来源

2014-02-21 07:22:22

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

回答

相关问题