Question

我有一个div board，它从数据库中加载可拖动和可调整大小的内容。

我使用此代码来请求代码。

$MBId = $_GET['id'];///the id i get from the url
if ($MBId != null)
{
    $sqlmoodboard= "SELECT Content  FROM Moodboards WHERE Id ='$MBId' ";
    $result = mysql_query("$sqlmoodboard ");

    while($row = mysql_fetch_array($result))
    {
        echo "<div id=\"print\">";
        echo $row['Content'];
        echo "</div>";
    }
}

我从数据库获得代码

<div class="ui-draggable sleep ui-resizable" style="position: absolute; left: 450px; top: 117px;"> <img src="/imgurl.jpg" class="center"> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div> <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>

页面上的来源。

<div class="ui-draggable sleep ui-resizable" style="position: absolute; z-index: 1; left: 143px; top: 78px;"> <img src="/imgurl.jpg" class="center"> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"> </div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"> </div> <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"> </div> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"> </div> <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"> </div></div>

在我的＆lt;头＆gt;我有

<script> $(document).ready(function() { $(".sleep").draggable(); $(".sleep").resizable(); }); </script>

图像是可拖动的，但我无法调整大小。

我用过

$(document).ready(function() { });

最后它应该像http://jsfiddle.net/75PvA/4/但是在加载数据库中的内容之后。

所以我知道在重置'resizable功能之前已加载内容。

注意我发布了一个类似的问题，但我问错了所以我关闭了那个

我的解决方案

在保存到数据库之前，我已经更改了我的保存功能，我调用了destroy（删除可调整大小）。

然后我将div保存到数据库中。

然后我刷新页面使其加载最新保存的文件，然后我使用.resizable（{aspectRatio：true}）现在一切正常，但没有回答问题。

Answer 1

页面上有很多代码，因此尝试隔离问题和解决方案非常困惑。但是，我认为jQueryUI检测到可调整大小的 CSS类已经添加到要调整大小的元素中。所以它没有添加任何事件处理程序。

所以你需要先用：

完全删除所有的jQueryUI类

$(".sleep").resizable('destroy')

首先，然后使用

重新添加可调整大小的功能

$(".sleep").resizable({handles: 'e, s, se'})

但是，对于重新添加.click的元素，有一个.resizable()事件，该事件打破了south-east调整大小句柄的位置。

同样的逻辑适用于.draggable()。在尝试重新添加功能之前，需要先将其销毁。

当用户保存图像而不是所有标记时，简单地存储图片的位置会容易得多。然后标记将是干净的（并且jQueryUI类免费），因此在干净标记上调用.resizable()将按预期工作。

Answer 2

试试这个。

<div id="drag" class="ui-draggable sleep ui-resizable" style="position: absolute; left: 10px; top: 17px; height: 50px; width: 50px;">
    <img src="/imgurl.jpg" class="center" />

 <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>

 <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
</div>

http://jsfiddle.net/SanketS/75PvA/2/

这是给出问题的一个例子。

Answer 3

如果你删除最后一个div标签

<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>

如果你没有必要那么它会正常工作。试试这个 jsfiddle.net/SanketS/75PvA/2

Answer 4

您正在做的事情存在一些问题，但我无法明确说明是否有一个（或任何一个）导致您遇到的问题。你提供了很多代码，但它是如此脱节，以至于很难找出正在发生的事情。

您正在从数据库执行while循环，但指定了print的ID。如果您有多行，则会导致问题，因为多个元素具有相同的ID。
您的“数据库中的代码”不平衡。你还有一个开始div而不是结束。这显然会引起问题，但我不知道这是否是粘贴到问题中的结果，或者数据是否真的很糟糕。
正如andyb所提到的，你实际上并不需要（也不应该）首先添加div个。 jQuery处理它。查看更新后的小提琴：http://jsfiddle.net/75PvA/5/
您的整个数据库都存在风险。即使是最基本的检查，您仍然信任用户输入的值。停止使用mysql_ *函数，并开始使用PDO。

最后一个肯定不是你当前问题的根源，但在未来会产生更大的破坏性影响。

数据库查询后Jquery不可拖动

4 个答案: