jQuery resize（）事件在拖动时不起作用 [英] jQuery resize() event is not working while draggable

问题描述

我尝试使用jQuery将Draggable放入DIV（id = sortable）中，但它无法调整大小。

1. 可拖动的将我拖拽DIV到DIV（id =可排序）
   
2. 可拖动在DIV（id = sortable）中正常工作

ol>








3. 可调整大小在DIV内不起作用（id = sortable）






有谁知道我在做什么错？



脚本和 HTML



  $（＃sortable）。sortable（{revert：true}）; $（＃draggable）。draggable（{connectToSortable：#sortable，helper：clone，revert： 无效}）; $（'。resizemove'）。resizable（）;}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< /脚本>< DIV> < div id =draggableclass =ui-state-highlight ui-state-default resizemove DivStylestyle =width：100px; height：100px; display：block; background：lightyellow;> Drag down down< / div>< br>< / div>< div id =sortableclass =main-wrapstyle =border：5px solid rgb（221,221,221）; padding：5px; clear：both ;> < div class =ui-state-default resizemove DivStylestyle =width：100px; height：100px; display：block; background：lightbluered;> One< / div> < div class =ui-state-default resizemove DivStylestyle =width：100px; height：100px; display：block; background：lightpink;> Two< / div> < div class =ui-state-default resizemove DivStylestyle =width：100px; height：100px; display：block; background：lightgray;> Three< / div> < div class =ui-state-default resizemove DivStylestyle =width：100px; height：100px; display：block; background：lightseagreen;> Four< / div> < div style =clear：both>< / div>< / div>  


$ b

以下是 JsFiddle

解决方案

我会调整您的Draggable句柄。例如：



  $（＃draggable）。draggable（{
 connectToSortable：#sortable，
处理：$（this）.not（。ui-resizable-handle），
 helper：clone，
 revert：invalid
}）; 
  

示例： https://jsfiddle.net/Twisty/84cvchas/2/




I am trying to use jQuery to make "Draggable" into the DIV(id=sortable), but it's not working "Resize".

1. Draggable "Drag me down" DIV into DIV(id=sortable)
2. Draggable is working fine within the DIV(id=sortable)

3. Resizable is not working within the DIV(id=sortable)

Does anyone know what I am doing wrong?

Script and HTML

$(function() {
  $("#sortable").sortable({
    revert: true
  });
  $("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  });

  $('.resizemove').resizable();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="draggable" class="ui-state-highlight ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightyellow;">Drag me down</div><br>
</div>

<div id="sortable" class="main-wrap" style="border:5px solid rgb(221, 221, 221);padding: 5px; clear: both;">
  <div class="ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightbluered;">One</div>
  <div class="ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightpink;">Two</div>
  <div class="ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightgray;">Three</div>
  <div class="ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightseagreen;">Four</div>
  <div style="clear:both"></div>
</div>

Here is the JsFiddle

解决方案

I would adjust your Draggable Handle. For example:

  $("#draggable").draggable({
    connectToSortable: "#sortable",
    handle: $(this).not(".ui-resizable-handle"),
    helper: "clone",
    revert: "invalid"
  });

Example: https://jsfiddle.net/Twisty/84cvchas/2/

这篇关于jQuery resize（）事件在拖动时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！