Converted the checkboxes into images, need to add a drag function to change images

Question

I actually converted the html checkboxes into images(below is the code), now the checkboxes have 3 states one for checked, one for unchecked and one for null,

now i want to add a DRAG feature to it like if we select unchecked and drag on other checkboxes, the other checkboxes should get this value, i meam the image must be changed.

Here is an example on this link http://cross-browser.com/x/examples/clickndrag_checkboxes.php , this example is without images but i want the same thing to happen with images.

Any help will really make my day, Thanks!

here is the code:

 <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>

Eugene Naydenov · Answer 1 · 2012-08-10T01:47:48.863

0

I guess that jQuery Draggable and Droppable could help you.

SAMPLE CODE

One more SAMPLE without drag and drop that is more similar to your example with regular checkboxes.

edited Aug 10 '12 at 01:47

answered Aug 10 '12 at 00:14

Eugene Naydenov

7,165
2
25
43

I have seen those Draggable and Droppable before, I am actually new to jquery, so if you can provide any sample code, it will be really helpfull. – user1586243 Aug 10 '12 at 00:36
This is a perfect example of what I'm looking to do, but i need to do the same when checkboxes are converted into images, i will work on it and get back to you if i have any problems. – user1586243 Aug 10 '12 at 03:04
Hi, i am not able to do the same with checkboxes, please i need more help. – user1586243 Aug 10 '12 at 18:49
If you are not intend to display a regular checkboxes, just render hidden fields instead and change their states each time when the state of "image checkbox" changed (or just once before the form submitting). Also you can use the code from my example - just replace the IMG element with a DIV which has an appropriate background image for each state. – Eugene Naydenov Aug 10 '12 at 22:22
so, i used hidden fields and used your code and added bacground-images to it, it works fine, but i want like 3 states instead of 2, i tried modifying your code but it dint work out, Can you please change your code so it works for 3 states. – user1586243 Aug 10 '12 at 22:56
This works Great!, but this 3 states thing works like this http://jsfiddle.net/f0t0n/TRsLA/ but i want it to work like this http://jsfiddle.net/f0t0n/cyTUX/ , is it possible? – user1586243 Aug 10 '12 at 23:55
Thank You so so much Evgeniy Naydenov, will get back to you if i have any problems with this, once again thank you so much. – user1586243 Aug 11 '12 at 00:24
Hi, i need to do form validation, so the checked or unchecked or none should be sent to database, your example is not working when associated with input="hidden" and class="checkbox", it only works when associatds with a div or , please help. – user1586243 Aug 13 '12 at 18:53
here is a fiddle http://jsfiddle.net/cyTUX/17/ with input fields, can you please make this work similar to the 3 states example! – user1586243 Aug 13 '12 at 19:05
Dear @user1586243 , StackOverflow is intended to ask a questions and get answers and to get or give help to solve programming issues, but not to make work for you. But seems you just need a JavaScript programmer in your project. :) If you have some particular question about any programming issue, create a question at StackOverflow and people will try to help you. – Eugene Naydenov Aug 14 '12 at 19:23
i am really sorry, i am new to javascript that is why asked you so many times, i achieved what i was looking for, thank you so much for your help. – user1586243 Aug 15 '12 at 18:00

adeneo · Answer 2 · 2012-08-10T00:42:37.390

It really is quite simple, bind an event to mousedown and not click, set a variable to indicate that the button is held down and at the same time check/uncheck the current checkbox etc.

Set another event to the mouseenter event of any checkbox, then check it the mousebutton is held down, and set the state to the same as the first checkbox where the mousebutton was first pressed down.

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

Here's a fiddle to show how : FIDDLE

This will still have some bugs in it, and will need some additional checks etc. but it's basically how it's done.

I'm not going to go through all your code with bits of PHP and javascript sprinkled in it, you should probably have set up a fiddle with the HTML and some images if that is what you wanted, so you'll have to figure out how and where to switch the images yourself, but that should be pretty straight forward

Hi, im really new to jquery, here is the fiddle with my javascript code to change checkboxes http://jsfiddle.net/8Zcbz/3/ , now you can take a close look at the code which i provided earlier. — user1586243, Aug 10 '12 at 00:58
I really have veryy little knowledge in jquery , so if you can help me with code to change the checkbox image on drag it will be helpfull. — user1586243, Aug 10 '12 at 00:59
Here is fiddle jsfiddle.net/f0t0n/cyTUX which is a perfect example of what i want to do, but i want the same thing to happen when checkboxes are converted into images, please help. — user1586243, Aug 10 '12 at 23:07

score 0 · Answer 3 · edited May 23 '17 at 12:27

There are several ways to add event listeners. The following concept can also be used using jQuery (and personally what I prefer).

object = document.getElementById("objectName");

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

And there are jQuery shortcuts such as:

$(object).mousedown(eventMouseDown);

$(object) is the object you want to listen for the event. Not all browsers support event capturing (Internet Explorer doesn't) but all do support event bubbling, so I believe the most compatible code is adding the event listener without jQuery.

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

According to this post, the preferred way of binding an event listener to a document in jQuery is using .on() rather than .bind(), but I have not tested this yet.

Hope this helps.

i am new to jquery, can you please provide an example which is something similar to my example, here is fiddle http://jsfiddle.net/f0t0n/cyTUX/ which is a perfect example of what i want to do, but the problem is it doesnt work when checkboxes are converted into images, Any help in combining my code and this fiddle http://jsfiddle.net/f0t0n/cyTUX/ so that it works for checkboxes will be really helpfull to me. — user1586243, Aug 10 '12 at 23:05

Converted the checkboxes into images, need to add a drag function to change images

3 Answers3