jQuery-ドラッグ可能な相互作用

説明

*Drag-able* 関数は、JqueryUIのインタラクションで使用できます。この関数は、DOM要素でドラッグ可能な機能を有効にできます。ドラッグ可能な要素は、マウスでクリックしてドラッグできます。

構文

ドラッグ可能を使用する簡単な構文は次のとおりです-

 $( "#draggable" ).draggable();

例

以下は、ドラッグ可能の使用法を示す簡単な例です-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">

         $(function() {
            $( "#draggable" ).draggable();
         });

      </script>

      <style>
         #draggable { width: 150px; height: 150px; padding: 0.5em; }
         .back{
            background-color: lightgrey;
            width: 50px;
            padding: 25px;
            border: 25px solid navy;
            margin: 25px;
         }
      </style>
   </head>

   <body>
      <div id = "draggable" class = "ui-widget-content">
         <p class = "back">Drag</p>
      </div>

   </body>
</html>

これにより、次の結果が生成されます–

Jquery-interactions-dragable

目次

jQuery-ドラッグ可能な相互作用

説明

構文

例