Question

我实际上将html复选框转换为图像（下面是代码），现在复选框有3个状态，一个用于检查，一个用于未选中，一个用于null，

现在我想添加一个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>

Answer 1

我想jQuery Draggable和Droppable可以帮到你。

SAMPLE CODE

One more SAMPLE没有拖放，这与您使用常规复选框的示例更相似。

Answer 2

这非常简单，将事件绑定到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和一些图像，如果这是你想要的，所以你会有找出自己如何以及在何处切换图像，但这应该是非常简单的

Answer 3

有几种方法可以添加事件侦听器。以下概念也可以使用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);

根据这个post，在jQuery中将事件监听器绑定到文档的首选方法是使用.on（）而不是.bind（），但我还没有测试过。

希望这有帮助。

将复选框转换为图像，需要添加拖动功能来更改图像

3 个答案: