Jquery可拖放对象。试图找出如何向可拖放对象添加值

编程和jquery新手。我有一个问题看起来很简单，但我想不出来。如果你能帮忙，我们将不胜感激

如何向可拖放对象添加一个值，以便在将对象拖放到可拖放区域时，该对象注册其指定的值？它还需要添加多个对象

例如，对象1=10、对象2=25等。当对象被丢弃时，计数器会显示该值

因此，对象1在被丢弃时会注册10，如果对象2也被丢弃，计数器会注册并显示35添加两个对象等

---

谢谢

您可以在可拖动项目上使用数据属性，如

数据拖动值

，然后在拖放事件中检索该属性

HTML:

在这里看一下我的JSFIDLE示例：

更新

试试这个

首先将这些标签添加到头部标签

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

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

HTML

玩具


铅笔


笔

工作小提琴

试试这个

将这些标签添加到头部标签

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

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

---

希望这对您有所帮助，谢谢您

在您尝试发布代码的基础上创建一个提琴。你已经尝试过的……我正试图让#计数器在每件物品放入盒子时增加物品的价值。嗨，Sarath，我喜欢你的想法，但我正在寻找更接近马克建议的东西。这是jfiddle我试图让#计数器在每个项目放入框中时添加对象的值，我也希望它随着项目取出而递减？你只想知道项目被丢弃的次数。不是真的，我希望它在每个项目放入可拖放区域时添加值。就像购物车一样，如果drop1=$10和drop2=$30，我将这两个都放到了drop区域，那么计数应该是$40。Hello@user2710772我已经更新了代码和演示。看看这个。希望这有帮助。根据您的要求创建了一个小提琴。虽然代码发现wierd正如我生前所写的，但它满足您的要求。请不要忘记检查，我遵守了我的诺言。我已经在上面的代码中解释了每个函数以及每个函数的代码。希望这对你有帮助。非常感谢！由于我对jquery和编码基本上是新手，对我可以去哪里学习它有什么建议吗？我是一个非常直观的人，阅读对于我虚弱的头脑来说是不够的。对于一个刚开始使用的人，首先学习javascript，如果你学习javascript，你会发现jquery很容易。jquery只是一个简化的javascript

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

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

            });
        }

    });

});

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

div {
    float: left;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
    border:3px solid;
}