Question

在使用Jquery UI可拖动时，我在使用同一元素上的resizable时遇到了一些问题，例如div元素。当我在同一个元素上同时应用draggable和resizable时，它会生成一个包含3个div的堆栈，其中一个可拖动，另外2个可拖动div。我不知道它有什么问题。我试图按照jqueryui.com上给出的指示，我没有弄清楚我的HTML有什么问题。这是代码。

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

    <link type="text/css" href="UI/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

    <script type="text/javascript" src="../JS/jquery-1.3.2.js"></script>

    <script type="text/javascript" src="UI/ui.core.js"></script>

    <script type="text/javascript" src="UI/ui.draggable.js"></script>
<script type="text/javascript" src="UI/ui.resizable.js"></script>

    <style type="text/css">

        #demo-frame
        {
            border: 1px solid #DDDDDD;
            clear: right;
            height: 300px;
            overflow: hidden;

            width: 520px;
        }
        #demo-frame .demo
        {
            padding: 5px;
        }

        #demo-frame .demo div
        {
            width: 100px;
            height: 70px;
            background-color:Transparent;
            border:solid 1px black;
            cursor:move;
        }
    </style>

<script type="text/javascript">
    $(function()
    {
        $("#MainCanvas div").draggable();
    });


    $(document).ready(function()
    {
        $("#MainCanvas").click(function()
        {
            $(this).children("div").css("border-style", "solid");
        });

        $("#MainCanvas div").live("mouseover", function()
        {
            $(this).css("border-color", "red");
        });

        $("#MainCanvas div").live("mouseout", function()
        {
            $(this).css("border-color", "black");
        });
        $("#MainCanvas div").live("mouseover", function()
        {
            $(this).draggable();
        });

        $("#MainCanvas div").live("click", function()
        {
            $("#MainCanvas div").css("border-style", "solid");
            $(this).css("border-style", "dashed");
            $(this).resizable();
        });

        $("#AddText").click(function()
        {
            var newDiv = $("<div></div");

            $(newDiv).html("New div");
            $("#MainCanvas").append(newDiv);
        });
    });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <div id="demo-frame">
        <div class="demo" id="MainCanvas">
            <div>
                <p>
                    Drag me around</p>
            </div>
        </div>

    </div><br /><input type="button" value="Add Text" id ="AddText" />

</asp:Content>

Answer 1

您的代码中有错误

var newDiv = $("<div></div");
//should be
var newDiv = $("<div></div>");

Answer 2

您与CSS以及可调整大小的插件创建的元素存在冲突。这个位将匹配插件为句柄添加的所有DIV，等等。给容器DIV一个类，并将CSS应用于该类，使其与插件创建的元素不匹配

#demo-frame .demo div  
{  
    width: 100px;  
    height: 70px;  
    background-color:Transparent;  
    border:solid 1px black;  
    cursor:move;  
}

应该是这样的：

.container
{
    width: 100px;  
    height: 70px;  
    background-color:Transparent;  
    border:solid 1px black;  
    cursor:move;  
}

将标记更改为：

<div id="demo-frame">       
    <div class="demo" id="MainCanvas">       
        <div class="container">       
            <p>Drag me around</p>       
        </div>       
    </div>
</div>
<br />
<input type="button" value="Add Text" id ="AddText" />

jquery UI Draggable与Resizable在同一个元素上

2 个答案: