hoverclassオプションを使用したドラッグアンドドロップ

説明

これは、droppableがアクティブなときに要素に追加されるCSSクラスの名前です（許容可能なドラッグ可能なホバーがその上にあります）。デフォルトはnullです。

構文

Droppables.add('element', {hoverclass: 'cssClass'});

ここで、cssClassはCSSクラスであり、要素に適用されます。

例

この例では、そのエリアにアイテムをドロップしようとすると、ドロップエリアは明るい黄色になります。

<html>
   <head>
      <title>Drag and Drop Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {

           //Make all the images draggables from draggables division.

            $A($('draggables').getElementsByTagName('img')).each( function(item) {
               new Draggable(item, {revert: true, ghosting: true });
            });

            Droppables.add( 'droparea', {hoverclass: 'hoverActive', onDrop: moveItem});

           //Set drop area by default  non cleared.
            $('droparea').cleared = false;
         }

        //The target drop area contains a snippet of instructional
        //text that we want to remove when the first item
        //is dropped into it.

         function moveItem( draggable,droparea){
            if (!droparea.cleared) {
               droparea.innerHTML = '';
               droparea.cleared = true;
            }

            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
         }
      </script>

      <style type = "text/css">
         #draggables {
            width: 172px;
            border: 3px ridge blue;
            float: left;
            padding: 9px;
         }

         #droparea {
            float: left;
            margin-left: 16px;
            width: 172px;
            border: 3px ridge maroon;
            text-align: center;
            font-size: 24px;
            padding: 9px;
            float: left;
         }

         .hoverActive {
            background-color: #ffffcc;
         }

         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
         }
      </style>
   </head>

   <body>
      <div id = "draggables">
         <img src = "/images/html.gif"/>
         <img src = "/images/css.gif"/>
         <img src = "/images/xhtml.gif"/>
         <img src = "/images/wml_logo.gif"/>
         <img src = "/images/javascript.gif"/>
      </div>

      <div id = "droparea">
         Drag and Drop Your Images in this area
      </div>
   </body>
</html>

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

Script.aculo.us-scriptaculous-hoverclass-example

hoverclassオプションを使用したドラッグアンドドロップ

説明

構文

例

目次