使用jQuery UI可调整大小和可拖动的问题

问题描述：

我试图允许拖放的元素在父容器中可拖动和可调整大小。使用jQuery UI可调整大小和可拖动的问题

这里是我的CSS：

.toolitem {padding:5px 10px;background:#ececec;border:1px solid silver}.labelitem {width:114px;padding:10px 5px;color:#222;background:#fff;border:1px solid silver}

这里是我的html：

<header> 
<ul> 
    <li><div id="atool" class="toolitem droppable">A</div></li> 
    <li><div id="btool" class="toolitem droppable">B</div></li> 
</ul> 
<div class="clear"></div></header><section id="container"/>

这里是我的JS：

$(".toolitem").draggable({ 
    opacity:1, 
    tolerance:'fit', 
    helper:'clone' 
}); 
$("#container").droppable({ 
    accept:'.droppable', 
    drop: function (event, ui) { 
     // Check for new or already dropped element 
     var dropped = ui.draggable.data("dropped"); 
     if (dropped == null && dropped != "1") { 
      // Create new element only once 
      var label = $('<div class="labelitem droppable">[Label]</div>'); 
      // Set flag as dropped 
      label.data("dropped", "1"); 
      // Make new element draggable within parent 
      label.draggable({ containment: 'parent', grid: [2, 2], helper: 'original' }); 
      // Make new element resizable within parent 
      label.resizable({ containment: 'parent' }); 
      // Append new element to parent 
      label.appendTo(this); 
     } 
    } 
});

上面的代码执行好，除了下降DIV不可调整大小。请帮忙。

答

我自己解决了。谷歌搜索了一个小时后，我发现我错过了以下内容：

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

它需要调整div的样式。现在一切都按预期工作。但是，奇怪的是它从来没有在jQueryUI文档中提及，或者我错过了它。

使用jQuery UI可调整大小和可拖动的问题

相关推荐