相同元素的可拖動和可調整大小的問題

我一直在做一些關於可拖動的& 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

相同元素的可拖動和可調整大小的問題

回答

相關問題