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>
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();
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.