0

我实际上将 html 复选框转换为图像（下面是代码），现在复选框有 3 种状态，一种为选中，一种为未选中，一种为空，

现在我想向它添加一个 DRAG 功能，就像我们选择未选中并拖动其他复选框一样，其他复选框应该得到这个值，我想必须更改图像。

这是此链接上的示例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可以帮助你。

示例代码

另一个没有拖放的SAMPLE与带有常规复选框的示例更相似。

于 2012-08-10T00:14:36.323 回答
0

这真的很简单，将事件绑定到 mousedown 而不是单击，设置一个变量以指示按钮被按住，同时选中/取消选中当前复选框等。

将另一个事件设置为任何复选框的 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 中将事件侦听器绑定到文档的首选方法是使用 .on() 而不是 .bind()，但我尚未对此进行测试。

希望这可以帮助。

于 2012-08-10T01:10:46.530 回答