jQuery UI的可拖動和可調整大小不工作

怎樣纔可以有一個div都拖動和調整大小？ div with contenteditable =「true」無法正常工作，無法編輯。這裏有什麼問題？

從Answer更新代碼由Chris Moutray：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI</title> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
    <style> 
    body{ } 
    #container{ width: 980px; margin: 0 auto; } 
    #background { background: red; width: 600px; height: 400px; margin: 0 auto; background-size: 600px 400px;} 
    .draggable { width: 250px; height: 150px; padding: 0.5em; opacity: 0.5; color: #000; background: #f0f0f0; } 
    </style> 
    <script> 
     $(document).ready(function() { 
      $(".resizeable").resizable({ 
       containment: "#background" 
      }); 

      $(".draggable").draggable({ 
       cursor: "crosshair", 
       containment: "#background", 
      }); 
     }); 

    </script> 
</head> 
<body> 
<div id="container"> 
    <div id="background"> 
     <div class="draggable resizeable" style="display:inline-block"> 
       <div contenteditable="true" id="message"> 
        Enter message.. 
       </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

可拖拽工作正常，但horizantal調整大小不起作用。當我嘗試增加水平尺寸時，它會自動變小，然後不能再調整大小。可能是什麼問題？

來源

2012-11-20 VishwaKumar

首先，你需要鏈接了jQuery UI的資源

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />

然後你可以或許通過類，而不是合併拖動和可調整大小元素融入其中和參考。

HTML

<div id="background"> <div class="draggable resizeable" style="display:inline-block"> <div contenteditable="true" id="message"> Enter message.. </div> </div> </div>

JQUERY

$(".resizeable").resizable({ containment: "#background" }); $(".draggable").draggable({ cursor: "crosshair", containment: "#background", });

繼承人你的代碼的工作示例http://jsfiddle.net/chrismoutray/H9kgP/2/

來源

2012-11-20 06:45:38

我在本地文件中使用相同的代碼從你的。可拖動的工作正常，但水平調整不起作用。當我嘗試增加水平尺寸時，它會自動變小，然後不能再調整大小。可能是什麼問題？我編輯了我的問題以發佈本地代碼 – VishwaKumar

@VishwaKumar可調整大小似乎僅限於#container，但忽略其左側的偏移量。因此，如果我將#container設置爲具有100％的寬度和50px的邊距，那麼我可以調整大小* resizeable *大於背景大小減去容器左邊距。 –

另請參閱http://stackoverflow.com/questions/3220737/in-jquery-how-to-fix-containment-bug-when-using-resizable-and-draggable-sim –

jQuery UI的可拖動和可調整大小不工作

回答

相關問題