IE8中的Jquery UI：暫停排序行爲，同時調整可排序和可調整大小的元素

我有一個元素列表，我想使用JQuery UI進行排序和調整大小。在Chrome和Firefox中將它們結合起來效果很好。但是在IE8中（在正常和兼容性視圖中），單獨使用時，任何一種行爲都可以很好地發揮作用，但如果組合使用，則會導致混合行爲不受歡迎。IE8中的Jquery UI：暫停排序行爲，同時調整可排序和可調整大小的元素

我的期望是通過拖動可調整大小的手柄來調整元素大小而不是也會激活可排序的行爲並移動該元素。不幸的是，當我拖動元素的大小調整區域時，它也拖動元素，就好像我正在移動它的排序位置。我希望這兩種行爲是排他性的。下面是代碼複製行爲：

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script> 

    <style type="text/css"> 
    .item { width: 200px; height: 20px; border: 1px solid gray; float: left; } 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 

    $(".item").resizable({ 
     start:function() { 
     $("#wrapper").sortable("disable"); 
     }, 
     stop:function() { 
     $("#wrapper").sortable("enable"); 
     } 
    }); 
    $("#wrapper").sortable({ 
     items:".item" 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="wrapper"> 
    <div class="item">a</div><div class="item">b</div><div class="item">c</div><div class="item">d</div> 
    </div> 
</body> 
</html>

我曾嘗試多種策略解決這個，包括：

上面的方法，它試圖禁用排序時調整開始。不幸的是，這根本沒有效果。
使用可調整大小的開始函數將一個類添加到該項目，然後對該類進行可排序過濾（例如$（「＃wrapper」）。sortable（{items：「。item：not（.resizing）」}） ;和$（「＃wrapper」）。sortable（{items：「。item」，cancel：「。resizing」}）;）
什麼選擇器可用於排序和調整大小的幾種變化
大量的谷歌搜索，在我的辦公桌上打我的頭，並在微軟的大方向嘀咕。

任何幫助，非常感謝。

來源

2009-07-09 jlarson

我通過指定可排序的句柄並在div中包含span來解決此問題。

演示here。

這意味着，不幸的是整個元素不可用於排序，但你可以玩把手的尺寸和妥協！

來源

2009-07-09 18:54:34 redsquare

是的，這是「不幸」後的位，我認爲這不會在這裏工作......我幾乎認爲我試過這條路線，但我會再試一次。謝謝 – jlarson 2009-07-13 14:03:04

我正在做類似的事情，這是我在下面做的。指定用於排序的句柄似乎有訣竅。

您可能需要修改CSS和JavaScript的東西，以適應您如何設置您的環境。

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery UI Resizable - Default functionality</title> 
    <link type="text/css" href="/jquery/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="/jquery/js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="/jquery/js/jquery-ui-1.7.2.custom.min.js"></script> 
    <style type="text/css"> 
     #draggable { border:solid 1px black; width: 75px; height: 150px; padding: 0.5em; } 
     #resizable { border:solid 1px black; width: 75px; height: 150px; padding: 0.5em; } 
     #resizable h3 { text-align: center; margin: 0; } 
     #sortable { list-style-type: none; margin: 0; padding: 0; } 
     #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; width: 100px; background-color:#CCC;border:solid 1px black;} 
     </style> 
     <script type="text/javascript"> 
     $(function(){$("#sortable").sortable({handle: 'span'});}); 
     $(function(){$("#item1").resizable();}); 
     $(function(){$("#item2").resizable();}); 
     $(function(){$("#item3").resizable();}); 
     </script> 
    </head> 
    <body> 
    <div> 
     <ul id="sortable"> 
      <li id="item1" class="ui-state-default"><span>Item 1</span></li> 
      <li id="item2" class="ui-state-default"><span>Item 2</span></li> 
      <li id="item3" class="ui-state-default"><span>Item 3</span></li> 
     </ul> 
    </div> 
</body> 
</html>

來源

2009-07-16 19:06:54

IE8中的Jquery UI：暫停排序行爲，同時調整可排序和可調整大小的元素

回答

相關問題