1

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

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

$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>

在我的<head>我有

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

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

我用了

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

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

所以我知道在我“重置”可调整大小的功能之前加载了内容。

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

我的解决方案

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

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

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

4

4 回答 4

1

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

因此，您需要首先完全删除所有 jQueryUI 类：

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

首先，然后重新添加可调整大小的功能

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

但是，在.click重新添加的元素上有一个事件，.resizable()它破坏了south-east调整大小手柄的位置。

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

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

于 2013-04-18T13:21:21.230 回答
0

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

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

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

于 2013-04-18T09:42:19.183 回答
0

您正在做的事情存在一些问题，尽管我不能具体说明是否有一个（或任何一个）导致了您所看到的问题。你提供了很多代码，但它是如此脱节，以至于很难隔离正在发生的事情。

  1. 您正在while从 db 执行循环，但分配的 id 为print. 如果您有不止一行，则会导致问题，因为多个元素将具有相同的 id。
  2. 您的“数据库代码”不平衡。你有一个div比关闭多一个开放。这显然会导致问题，但我不知道这是粘贴到问题中的结果还是数据真的很糟糕。
  3. 正如 andyb 提到的，您实际上不需要（也不应该）div首先添加那些 s 。jQuery 处理这个问题。请参阅更新的小提琴工作：http: //jsfiddle.net/75PvA/5/
  4. 您的整个数据库都处于危险之中。您无需进行最基本的检查即可信任用户输入的值。停止使用 mysql_* 函数，开始使用 PDO。

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

于 2013-04-18T11:45:02.150 回答
0

尝试这个。

<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/

这是为您的问题提供的示例。

于 2013-04-18T09:17:30.077 回答