0

実際にhtmlチェックボックスを画像に変換しました（以下はコードです）。チェックボックスには、チェック済み、未チェック、nullの3つの状態があります。

チェックを外して他のチェックボックスをドラッグすると、他のチェックボックスがこの値を取得する必要があります。画像を変更する必要があります。

このリンクhttp://cross-browser.com/x/examples/clickndrag_checkboxes.phpの例を次に示します。この例には画像がありませんが、画像でも同じことが起こるようにしたいです。

どんな助けでも本当に私の一日を作ります、ありがとう!

コードは次のとおりです。

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

    <script type="text/javascript">
    var inputs;
    var checked = 'checked.jpg';
    var unchecked = 'unchecked.jpg';
    var na = 'na.jpg';

    function replaceChecks()
    {
    //get all the input fields on the funky_set inside of the funky_form
    inputs = document.funky_form.getElementsByTagName('input');

    //cycle trough the input fields
    for(var i=0; i < inputs.length; i++)
    {
      //check if the input is a funky_box
      if(inputs[i].className == 'funky_box')
      {
         //create a new image
         var img = document.createElement('img');

         //check if the checkbox is checked
         if(inputs[i].value == 0 )
         {
            img.src = unchecked;
            inputs[i].checked = false;
         }
         else if(inputs[i].value = 1 )
         {
            img.src = checked;
            inputs[i].checked = true;
         }
         else if(inputs[i].value = 2 )
         {
            img.src = na;
            inputs[i].checked = true;
         }

         //set image ID and onclick action
         img.id = 'checkImage'+i;

         //set name
         img.name = 'checkImage'+i;

         //set image
         img.onclick = new Function('checkChange('+i+')');
         //place image in front of the checkbox
         inputs[i].parentNode.insertBefore(img, inputs[i]);

         //hide the checkbox
         inputs[i].style.display='none';
       }
    }
     }

    //change the checkbox status and the replacement image
     function checkChange(i) 
    {
    if(inputs[i].value==0)
     {
      inputs[i].checked = true;
      inputs[i].value = 2;
      document.getElementById('checkImage'+i).src=na;
     }
     else if(inputs[i].value==1)
     {
      inputs[i].checked = false;
      inputs[i].value = 0;
      document.getElementById('checkImage'+i).src=unchecked;
      }
      else if(inputs[i].value==2)
     {
      inputs[i].checked = true;
      inputs[i].value = 1;
      document.getElementById('checkImage'+i).src=checked;
       }
    }   

     setTimeout(function(){replaceChecks();}, 0);

      </script>

       </head>

      <form name="funky_form" action='checkkkkkkkkkkkkkkkkkkkkkkkkk.php' method='POST'>
    <table id="table1" border=1px cellpadding=1px cellspacing=1px>

    <tr>
                <th>D/T</th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
                <th>8</th>
                <th>9</th>
                <th>10</th>
                <th>11</th>
                <th>12</th>
                <th>13</th>
                <th>14</th>
                <th>15</th>
                <th>16</th>
                <th>17</th>
                <th>18</th>
                <th>19</th>
                <th>20</th>
                <th>21</th>
                <th>22</th>
                <th>23</th>
                <th>24</th>


    </tr>

    <?php
    $days = array('SUN');
    foreach($days as $key=>$val)
   {
    print "<tr>";
    print"<th>$val</th>";
    for($i=0; $i<24; $i++){
        print "<td>";
        print "  <input type=\"checkbox\" id=\"${val}${i}\" name=\"sun${i}\"         

     class=\"funky_box\" />";
        print "</td>";
     }
     print "</tr>";
   }

    $days = array('MON');
    foreach($days as $key=>$val)
    {
    print "<tr>";
    print"<th>$val</th>";
    for($i=0; $i<24; $i++){
        print "<td>";
        print "  <input type=\"checkbox\" id=\"${val}${i}\" name=\"mon${i}\" 

     class=\"funky_box\" />";
        print "</td>";
     }
     print "</tr>";
    }

     ?>
    </table>
    </form>
4

3 に答える 3

0

jQueryのDraggableとDroppableが役立つと思います。

サンプルコード

ドラッグアンドドロップを使用しないもう1つのサンプルは、通常のチェックボックスを使用した例に似ています。

于 2012-08-10T00:14:36.323 に答える
0

それは本当に非常に簡単で、クリックではなくマウスダウンにイベントをバインドし、変数を設定してボタンが押されていることを示し、同時に現在のチェックボックスをチェック/チェック解除するなどです。

任意のチェックボックスの mouseenter イベントに別のイベントを設定し、マウスボタンが押されていることを確認し、マウスボタンが最初に押された最初のチェックボックスと同じ状態に設定します。

var state = false, mouse=false;

$('checkbox').on({
    click: function(e) {
        e.preventDefault();
    },
    mousedown: function(e) {
        this.checked = !this.checked;
        state = this.checked;
        if(e.which === 1) mouse = true;
    },
    mouseup: function(e) {
        if(e.which === 1) mouse = false;    
    },
    mouseenter: function(e) {
        if (mouse) this.checked = state;
    }
});

ここにその方法を示すためのフィドルがあります: FIDDLE

これにはまだいくつかのバグがあり、追加のチェックなどが必要になりますが、基本的にはこのように行われます。

PHP と JavaScript が散りばめられたすべてのコードについて説明するつもりはありません。必要に応じて、HTML といくつかの画像にフィドルを設定しておく必要があります。画像を自分で切り替える方法と場所ですが、それはかなり簡単なはずです

于 2012-08-10T00:36:44.300 に答える
0

イベント リスナーを追加するには、いくつかの方法があります。次の概念は、jQuery を使用して使用することもできます (個人的には好みです)。

object = document.getElementById("objectName");

$(object).bind('dragstart', eventStartDrag);
$(object).bind('dragover', eventStartDrag);
$(object).bind('drag', eventDragging);
$(object).bind('dragend', eventStopDrag);

また、次のような jQuery ショートカットがあります。

$(object).mousedown(eventMouseDown);

$(object) は、イベントをリッスンするオブジェクトです。すべてのブラウザがイベント キャプチャをサポートしているわけではありませんが (Internet Explorer はサポートしていません)、すべてのブラウザがイベント バブリングをサポートしているため、最も互換性のあるコードは jQuery を使用せずにイベント リスナーを追加することだと思います。

object.addEventListener('mousedown', eventStartDrag, false);

この投稿によると、jQuery でイベント リスナーをドキュメントにバインドする推奨される方法は、.bind() ではなく .on() を使用することですが、これはまだテストしていません。

お役に立てれば。

于 2012-08-10T01:10:46.530 に答える