2

ドラッグ可能でサイズ変更可能なjQueryライブラリを使用してdivを描画する方法を理解しようとしています。私はこれを見つけました。 これはかなり素晴らしいですが、私は本当にこの機能が言及されたライブラリで動作することを望んでいます。具体的には、ドラッグ可能な要素を作成し、それをすべて1回のショットでドラッグ（サイズ変更）できるようにしたいと思います。これは可能ですか？

編集：ドラッグ可能またはサイズ変更可能で「作成」イベントが発生したときに、おそらく何かをする必要がありますか？どういうわけか、サイズ変更可能なコーナーにマウスを置く必要がありますか？実際にマウスを持ち上げてから、サイズ変更コーナーを押してドラッグするまで、サイズ変更はオンにならないようです。これが私が今持っているコードです：

 $('.container').live('mousedown', function(){
    $('.container').append('<div class="gen-box"></div>');
    $('.gen-box').resizable().draggable();
 });
4

3 に答える 3

4

私はこれに別の方法でアプローチします-selectableすでにボクシングメソッドを提供しているjQueryUIコンポーネントのようなものを使用します。マウス座標を公開するイベントがstartあります。stopこれに基づいてstop、必要なマウス座標を使用してイベントにdivを作成し、そのdivにサイズ変更およびドラッグ可能を追加できます。

とにかく、それは私がそれをする方法です。

他のオプションは、あなたがしていることを正確に実行しtrigger()、次のようにjQueryを使用してみることです。

 $('.container').live('mousedown', function(){
    $('.container').append('<div class="gen-box"></div>');
    $('.gen-box').resizable().draggable();
    $('.gen-box').trigger('mousedown'); // This may activate the resize ability, but you may need to target the resize handle, instead of the full div.
 });

これは動作するはずですが、いくつかの問題がある可能性があります（ 2008年からここでスレッドに遭遇しました）。ただし、これは正しい道に進むのに役立つかもしれません。幸運を。

于 2012-10-06T16:14:17.567 に答える
1

わかりました、私はついにそれを理解しました。@ lunchmeat317の提案に従ってselectable（）を使用しました。selectableのイベント中にマウスの位置をキャプチャすることができました。「start」と「stop」は、適切な幅、高さ、および位置でdivを作成します。これがjsfiddleです

于 2012-10-09T19:28:00.970 に答える
0

ドラッグしてサイズ変更可能なdivは、 jqueryuiライブラリを使用して簡単に作成できます。

この例を試すことができます。最新のJQueryおよびJQueryuilibsをダウンロードし、例のソースパスを調整します。サイズ変更には、サイズ変更機能を使用できます。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>

    <script type="text/javascript" src="/media/js/jquery-latest.js"></script>
    <script type="text/javascript" src="/media/js/jquery-ui-latest.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {        
        $( '#test' ).draggable();
      });
    </script>
  </head>

  <body>

    <div id="test" style="width: 100px; height: 50px; background-color: red;" >
      <p>Drag me</p>
    </div>

  </body>

</html>
于 2012-10-06T15:05:13.790 に答える