jQuery UI Draggable + Sortable を組み合わせた詳細な使用例

作業するときは、右側のパネルのコントロールを自由に並べ替えたまま、左側のデザインされたコントロールを右側のパネルにドラッグする必要があります。この記事は主に、ドラッグと並べ替えの操作をサポートする必要があります。 jQuery UI の Draggable + Sortable の併用に関する記事 (例付きの説明)。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

デモのスクリーンショット: 左側のコントロールから右側の領域にドラッグします

コード スニペット:

<script>
  $(function () {
    $("#box_wrap1,#box_wrap2").sortable({
      connectWith: ".box_wrap",
      helper: "clone",
      cursor: "move",//移动时候鼠标样式
      opacity: 0.5, //拖拽过程中透明度
      placeholder: "box-holdplace",//占位符className，设置一个样式
    }).disableSelection();
 
    $(".dragable").draggable({
      connectToSortable: ".sortable",
      helper: "clone",
      // revert: "invalid",
      // handle: ".handle"
    });
  });
</script>

Html コード:

nbsp;html>


  <meta>
  <title></title>
  <link>
  <link>
  <link>
 
  <script></script>
  <script></script>
 
  <!--Sortable -->
  <script></script>
 


  <p>
    </p><p>
      </p><p>
        </p><p>
          </p><p>
            left-test1
          </p>
          <p>
            left-test2
          </p>
          <p>
            left-test3
          </p>
        
      
      <p>
        </p><p>
          </p><p>
            test1
          </p>
          <p>
            test2
          </p>
          <p>
            test3
          </p>
        
      
    
  

関連推奨事項:

Yii フレームワーク開発チュートリアル Zii コンポーネントの並べ替え可能な例_PHP チュートリアル

Yii Framework 開発チュートリアル Zii コンポーネント - ソート可能な例

jquery_jquery でソート可能なソート後の保存された状態への解決策

以上がjQuery UI Draggable + Sortable を組み合わせた詳細な使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。