Javascript jQuery拖放DIV，并向每个toher添加自定义属性_Javascript_Jquery_Html_Drag And Drop

Javascript jQuery拖放DIV，并向每个toher添加自定义属性

javascript jquery html

Javascript jQuery拖放DIV，并向每个toher添加自定义属性,javascript,jquery,html,drag-and-drop,Javascript,Jquery,Html,Drag And Drop,我真的被困在如何实现这一点上了我正在尝试为一些当前评级创建一个用户友好的拖放计算器我希望能够将DIV从列拖动到右侧（每个DIV都有一个自定义属性调用'currentRating'，即当我将该DIV拖动到4个框中的一个框中时，我希望它留在该DIV中，并添加框的总数以及总计。我还希望能够在每个DIV位于4个框中的一个框中时更新每个DIV的数量这是可以实现的吗？我已经让它工作了，所以我可以拖放DIV，但就是这样这就是我目前所拥有的 <script type='text/javascri

我真的被困在如何实现这一点上了

我正在尝试为一些当前评级创建一个用户友好的拖放计算器

我希望能够将DIV从列拖动到右侧（每个DIV都有一个自定义属性调用'currentRating'，即当我将该DIV拖动到4个框中的一个框中时，我希望它留在该DIV中，并添加框的总数以及总计。我还希望能够在每个DIV位于4个框中的一个框中时更新每个DIV的数量

这是可以实现的吗？我已经让它工作了，所以我可以拖放DIV，但就是这样

这就是我目前所拥有的

<script type='text/javascript'>
$(window).load(function(){
$(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);    

            var width = $this.width();
            var height = $this.height();
            var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
            var cntrTop = (height / 10) - (ui.draggable.height() /10);

            ui.draggable.css ({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });

            count += $(".draggable").attr("rating");
            alert(count);
        }
    });
});

  $("#box_1").text(count);

});

</script>


</head>
<body>
<div class="item">
  <div class="draggable" rating="2">Text #1 <input style ="display: inline; width: 20px; float: right;" type="text" name="quantity" value="1" /></div>
  <div class="draggable" rating="1">Text #2 <input style ="display: inline; width: 20px; float: right;" type="text" name="quantity" value="1" /></div>
  <div class="draggable" rating="1">Text #3 <input style ="display: inline; width: 20px; float: right;" type="text" name="quantity" value="1" /></div>
  <div class="draggable" rating="1">Text #4 <input style ="display: inline; width: 20px; float: right;" type="text" name="quantity" value="1" /></div>
  <div class="draggable" rating="1">Text #5 <input style ="display: inline; width: 20px; float: right;" type="text" name="quantity" value="1" /></div>
</div>

    <div class="item">
    Total = <div id="box_1"></div>
    </div>
    <div class="item">
    </div>



</body>


$（窗口）。加载（函数（）{
$（函数（）{
$（“.draggable”）.draggable（）；
$（“.item”）。可拖放({
drop：函数（事件、用户界面）{
var$this=$（this）；
$this.append（ui.draggable）；
var width=$this.width（）；
var height=$this.height（）；
var cntrLeft=（宽度/2）-（ui.draggable.width（）/2）；
var cntrTop=（height/10）-（ui.draggable.height（）/10）；
ui.draggable.css({
左：cntrLeft+“px”，
顶部：CNTROP+“px”
});
计数+=$（“.draggable”）.attr（“评级”）；
警报（计数）；
}
});
});
$（“#方框1”）。文本（计数）；
});
正文#1
正文#2
正文#3
正文#4
正文#5
总计=

摆脱了在JS中的定位，因为我不需要它，您可以根据您的站点需要添加它

$（函数（）{
var count=parseInt（$（“#box_1”）.text（）；
var quantity=parseInt（$（“#box_2”）.text（）；
var评级；
var输入；
$（“.draggable”）.draggable（{revert:true}）；
$（“.item”）.dropable（{
drop：函数（事件、用户界面）{
rating=parseInt（ui.draggable.attr（'value'））；
Inputvals=parseInt（ui.draggable.children（）.val（））；
警报（评级）；
$（this.append）（ui.draggable）；
计数+=额定值；
数量+=输入量；
$（“#盒子_1”）.html（计数）；
$（“#box_2”）.html（数量）；
}
});
})；

给我们一些可以使用的代码。你需要什么代码来让它可以拖动/拖放并用一些代码更新。快到了，刚刚完成最后一步。谢谢你的帮助！