最初に、jQuery で Div 要素を回転させる方法を見て きましたが、希望する解決策が得られませんでした。
ドラッグ可能な div を含む div があります。
そのため、div スリープ内の div を含む 1 つのメイン div (ボード) (クラス スリープ) は、div の幅と高さ (アスペクト比を維持) の 100% にスケーリングされた画像です。
div はサイズ変更およびドラッグ可能です。
右下隅のサイズ変更のように、画像(div)を右上のハンドラーで回転できるようにしたい。
現時点でdivボードにドロップした画像1枚のhtmlはこんな感じ。
<div class="ui-draggable sleep ui-resizable" style="position: absolute; z-index: 1; left: 125px; top: 46px;">
<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>
ドラッグ可能/サイズ変更可能なアイテムの Jquery
.draggable({stack: ".sleep", containment: '#bord' })
.resizable
({containment:'#bord',aspectRatio: true})
.css({position: 'absolute'})
すべてのブラウザで回転できるようにしたい。
誰かが正しい方法で私を助けることができますか?
より明確な質問を編集:
このサイトのように、ドロップされた div を回転可能にしたい: http://mydeco.floorplanner.com/rooms/moodboard/
私はそのサイトのように見えるものを作っています:私はドロップできる画像を含むdivを持っています。
ドロップ後、ハンドラーで回転可能にしたい。
div をドロップ可能、サイズ変更可能、ドラッグ可能にしました。上記のコードを参照してください。
しかし、私が質問を投稿した理由は、回転可能なものをどこから始めるべきかわかりません.
どこから始めればよいかわからないため、例がありません。
少し評価を得たテスト ページを作成しましたが、うまく機能していません。
左側の画像のいずれかをクリックできます。
次に、白い枠でマークされてからクリックします
Omhoog Rechts Omlaag 方向を変更するためのリンク。しかし、ボタンではなくハンドラーで向きを変えてほしい。
600 行を超えるコードがあり、そのほとんどが php と jquery で、フィドルを作成しようとしましたが、コードが多すぎます。すべての jquery はソースで表示できます。