编程和 jquery 的新手。我有一个看起来很简单的问题，但我无法弄清楚。如果您能提供帮助，将不胜感激
如何向可放置对象添加值，以便在将对象放入可放置区域时注册其分配的值？它还需要添加多个对象。
例如对象 1 = 10、对象 2 = 25 等。当对象被放下时，计数器会显示该值。
所以对象 1 会在掉落时记录 10，如果对象 2 也被掉落，计数器将记录并显示 35 添加两个对象等。
谢谢
问问题
1510 次
3 回答
1
您可以在可拖动项目上使用数据属性data-drag-value，然后在放置事件中检索它。
HTML：
<div style="float:left">
<ul id="myDragList">
<li data-drag-value="1">One</li>
<li data-drag-value="2">Two</li>
<li data-drag-value="3">Three</li>
</ul>
</div>
<div id="myDroppable">Drop here
<div id="info"></div>
</div>
JavaScript：
$(document).ready(function () {
$("#myDragList li").draggable();
$("#myDroppable").droppable({
drop: function (event, ui) {
dragValue = ui.draggable.attr("data-drag-value");
$("#info").html("data-drag-value = " + dragValue);
}
});
});
看看我的 JSFiddle 示例：
于 2013-08-23T12:40:28.160 回答
0
工作小提琴演示
尝试这个
将这些标签添加到您的头部标签中。
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
代码
$(function () {
var drg;
var a = 0;
var cln;
var i = 0;
$(".ui-widget-content").draggable({ //div with the class'ui-widget-content' is set draggable
drag: function (event, ui) {
drg = $(this); // on drag gets which div is it
$("#droppable").droppable('enable'); // enabling drop of droppable div
},
helper: 'clone' // this to get the clone copy of the div on drag
});
$("#droppable").droppable({
drop: function () {
a = a + parseInt(drg.attr('value')); //get the value of the dropped div add to the total
$("#counter").html(a);
if ($("#" + drg.text()).length > 0) { // if droppable div already contains the same div eg'toy', then only the number to be increased
var txt = drg.text() + "1";
$("#" + txt).html(parseInt($("#" + txt).text()) + 1);
} else
{ // else append the div to the droppable div
$(this).append("<div id=" + drg.text() + " value=" + drg.attr('value') + ">" + drg.text() + "</div>");
$(this).append("<div id='" + drg.text() + "1' style='float:right'>" + $("#" + drg.text()).length + "</div><br>"); // lenght of the div eg:' toy 1' ,where 1 is the length
}
$("#" + drg.text()).draggable({ // enable the div dropped eg:'toy' in the droppable div to be draggable
drag: function (event, ui) {
$("#droppable").droppable('disable'); // on drag of it disable drop to the droppable div
drg = $(this); //get which div is dragged
},
stop: function (event, ui) { // on drag end or dropped
var tt = drg.text() + "1";
if (parseInt($("#" + tt).text()) > 1) { //eg: if in case 'toy' length >1 ie 'toy 3'
$("#" + tt).html(parseInt($("#" + tt).text()) - 1); //reduce the length field by 1
} else { // else remove the field out of droppable div
$("#" + drg.text()).remove();
$(this).remove();
$("#" + tt + " + br ").remove();
$("#" + tt).remove();
}
a = a - parseInt(drg.attr('value')); // reduce the div value from total amount
$("#counter").html(a);
},
helper: 'clone'
});
}
});
});
html
<div class="ui-widget-content" value="30">toy</div>
<br>
<div class="ui-widget-content" value="20">pencil</div>
<br>
<div class="ui-widget-content" value="10">pen</div>
<div id="droppable" class="ui-widget-header"></div>
<div style="float:bottom">Total : $</div>
<div id="counter">0</div>
css
div {
float: left;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
border:3px solid;
}
希望这会有所帮助，谢谢
于 2013-08-24T18:29:28.763 回答
0
更新了演示
尝试这个
首先将这些标签添加到您的头部标签中。
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
代码
$(function () {
var drg;
var a=0;
$(".ui-widget-content").draggable({
drag: function (event, ui) {
drg=$(this);
}
});
$("#droppable").droppable({
out : function(){
a= a-parseInt(drg.attr('value'));
$("#counter").html(a);
},
drop : function(){
a= a+parseInt(drg.attr('value'));
$("#counter").html(a);
}
});
});
HTML
<div class="ui-widget-content" value="30">
toy</div>
<br>
<div class="ui-widget-content" value="20">
pencil</div>
<br>
<div class="ui-widget-content" value="10">
pen</div>
<div id="droppable" class="ui-widget-header"></div>
<div id="counter"></div>
于 2013-08-23T12:52:47.607 回答