jQuery-ドロップ可能な相互作用

説明

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

構文

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

$( "#droppable" ).droppable();

例

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

<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();

            $( "#droppable" ).droppable({
               drop: function( event, ui ) {
                  $( this ).addClass( "ui-state-highlight" ).find( "p" )l( "Dropped!" );
               }
            });
         });

      </script>

      <style>
         #draggable { width: 100px; height: 100px;
            padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
         #droppable { width: 150px; height: 150px;
            padding: 0.5em; float: left; margin: 10px; }
      </style>
   </head>

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


      <div id = "droppable" class = "ui-widget-header">
         <p style = "background-color: aquamarine;height: 50;">Drop here</p>
      </div>

   </body>
</html>

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

Jquery-interactions-dropable

目次

jQuery-ドロップ可能な相互作用

説明

構文

例