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/のようになるはずですが 、データベースからコンテンツをロードした後です。

したがって、サイズ変更可能な関数を「リセット」する前に、コンテンツがロードされていることがわかります。

注: 同様の質問を投稿しましたが、間違った質問をしたため、その質問を閉じました

私の解決策

データベースに保存する前に、保存機能を変更しました（サイズ変更可能なものを削除するため）。

次に、div をデータベースに保存します。

次に、ページを更新して、保存された最新のファイルをロードします。次に、.resizable({aspectRatio: true})Everything works now を使用しますが、質問に対する回答はありません。

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 に答える