Add 1 to total individually using JQuery Drag and Drop

Question

Using JQuery UI, I have a list of items which for every individual drag and drop to the vote div I would like to add 1 to the span total. At the moment every drag and drop is adding 1 to the first list item, I have tried everything I know

JS

$count.droppable({
    accept: "#gallery > li",
    activeClass: "ui-state-highlight",
    drop: function() {
        var el = $('#rj_no');
        var num = parseInt(el.text());
        el.text(num + 1);
        $('#dialog').dialog();
    }
})

HTML

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">

    <li id="rj" class=" add ui-widget-content ui-corner-tr">
        <img src="assets/rosie_jim_poster.png" alt="Rosie and Jim" width="80" height="44">
        <h5 class="ui-widget-header">Rosie and Jim</h5>
        <p>Votes: <span id="rj_no">0</span>
        </p>
        <a id=rj href="#">watch</a>
    </li>

    <li id="wc" class="ui-widget-content ui-corner-tr">
        <img src="assets/willie_cordova_poster.png" alt="Willie Cordova" width="80" height="44">
        <h5 class="ui-widget-header">Willie Cordova</h5>
        <p>Votes: <span id="wc_no">0</span>
        </p>
        <a href="#">watch</a>
    </li>

    <li class="ui-widget-content ui-corner-tr">
        <img src="assets/kenan_and_kel_poster.png" alt="Kenan and Kel" width="80" height="44">
        <h5 class="ui-widget-header">Kenan and Kel</h5>
        <p>Votes:0</p>
        <a href="#">watch</a>
    </li>

    <li class="ui-widget-content ui-corner-tr">
        <img src="assets/rosie_jim_poster.png" alt="Rosie and Jim" width="80" height="44">
        <h5 class="ui-widget-header">Rosie and Jim</h5>
        <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
        <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
    </li>

    <li class="ui-widget-content ui-corner-tr">
        <img src="assets/willie_cordova_poster.png" alt="Willie Cordova" width="80" height="44">
        <h5 class="ui-widget-header">Willie Cordova</h5>
        <p>Votes:..</p>
        <a href="#">watch</a>
    </li>

    <li class="ui-widget-content ui-corner-tr">
        <img src="assets/kenan_and_kel_poster.png" alt="Kenan and Kel" width="80" height="44">
        <h5 class="ui-widget-header">Kenan and Kel</h5>
        <p>Votes:..</p>
        <a href="#">watch</a>
    </li>
</ul>

Chris Schnitzer · Answer 1 · 2015-07-09T23:24:28.213

Seems to work

$count.droppable({
  activeClass: "ui-state-highlight",
  drop: function(event, ui) {
   if(ui.draggable.is('#rj')) {
      var el = $('#rj_no');
      var num = parseInt(el.text());
      el.text(num+1);
    } else if(ui.draggable.is('#wc')) {
      var el = $('#wc_no');
      var num = parseInt(el.text());
      el.text(num+1);
    } else if(ui.draggable.is('#kk')) {
      var el = $('#kk_no');
      var num = parseInt(el.text());
      el.text(num+1);
    } else if(ui.draggable.is('#rj2')) {
      var el = $('#rj_no2');
      var num = parseInt(el.text());
      el.text(num+1);
    } else if(ui.draggable.is('#wc2')) {
      var el = $('#wc_no2');
      var num = parseInt(el.text());
      el.text(num+1);
    }else if(ui.draggable.is('#kk2')) {
      var el = $('#kk_no2');
      var num = parseInt(el.text());
      el.text(num+1);
    }
    $('#dialog').dialog();
  }
})

Add 1 to total individually using JQuery Drag and Drop

1 Answers1