查看此fiddle，我注意到将car1拖到第二行的第一个单元格时，我无法将car1放在第一个位置div。当我运行alert时，它总是以第二个小区ID响应。
例如：我需要从一个月的第一天开始租车，但租车总是从第二天开始。
$('.ccarcellbook').draggable({
helper : 'clone',
cursor : 'move',
snap : '.ccarcell',
snapMode : 'inner'
});
$('.ccarcell').droppable({
over: function(event, ui) {
var $this = $(this);
},
drop:function(event, ui) {
alert($(this).attr('id'))
}
});
答案 0 :(得分：2)
你应该给每辆车宽度相同，一个单元的全宽。哦，你现在遇到的麻烦就像你现在一样。
如果您想要更宽敞的汽车，可以额外增加一班车。使用伪元素可以使汽车更宽。
<强> WORKING DEMO
.ccarcellbook.wider:after {
width: 110px;
content: "";
position: absolute;
left: 0;
height: 100%;
background-color: red;
z-index: -1;
}
答案 1 :(得分：0)
我的代码现在已经出现了问题。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">-->
<style type="text/css">
body {font-size:12px; }
#principale {background-color:#eeeeee; }
#contenitore { float:left; padding-right:3px; width:303px; border:2px solid #aaaaaa;}
.camere {float:left; display:block; height:28px; border-top:1px solid #aaaaaa; border-left:1px solid #aaaaaa;}
#calendario {width:70%; overflow-x:auto;}
.testata_uno { width:320px;}
.intestazione {float:left;}
.width_h_60 {width:60%;}
.width_h_33 {width:33%;}
.width_h_20 {width:20%;}
.width_h_160px {width:160px;}
.width_h_70px {width:70px;}
.height_40 {height:40px;}
.height_30 {height:30px;}
.bordo_destro {border-right:3px solid #aaaaaa;}
.ccarrow { height:28px; /*padding-left:2px;*/ margin-bottom:2px;}
.giorno_calendario { width:40px; height:15px; float:left; border-top:#aaaaaa 1px solid; border-bottom:#aaaaaa 1px solid; border-left:#aaaaaa 1px solid; text-align:center; }
.ccarcell { width:40px; height:28px; float:left; cursor:pointer; border-bottom:#fbdda1 1px solid; border-left:#fbdda1 1px solid; background-color:#fff; }
.ccarcellbook { width:40px; height:28px; float:left; color:#FFFFFF; cursor:hand; background-color:#36c20b; border-bottom:#fbdda1 1px solid; border-left:#fbdda1 1px solid; border-radius:6px; }
.ccarcellbook.wider:after {
width: 28px;
content: "";
height: 100%;
background-color: green;
z-index: -1;
}
.wide {clear:both;}
</style>
</head>
<body>
<div id="principale">
<div id="contenitore">
<div class="testata_uno height_30">
<form action="" method="get">
<select name='mese'>
<option value='01'>Gennaio</option>
<option value='02'>Febbraio</option>
<option value='03'>Marzo</option>
<option value='04'>Aprile</option>
<option value='05'>Maggio</option>
<option value='06'>Giugno</option>
<option value='07' selected='selected'>Luglio</option>
<option value='08'>Agosto</option>
<option value='09'>Settembre</option>
<option value='10'>Ottobre</option>
<option value='11'>Novembre</option>
<option value='12'>Dicembre</option>
</select>
<input type="submit" name="visualizza" value="Vai" />
</form>
</div>
<div class="testata_uno">
<div class="intestazione width_h_160px bordo_destro"><b>Risorsa</b></div>
<div class="intestazione width_h_70px bordo_destro"><b>Capienza</b></div>
<div class="intestazione width_h_70px"><b>Stato</b></div>
</div>
<div class="wide"></div>
<div class="testata_uno">
<div class="camere width_h_160px">[#1] Car 1 </div>
<div class="camere width_h_70px">4 sits</div>
<div class="camere width_h_70px" style="border-collapse: separate; border-spacing: 10px; border-left:4px solid #1a9d13;">Pronta</div>
</div>
<div class="wide"></div>
<div class="testata_uno">
<div class="camere width_h_160px">[#2]Car 2</div>
<div class="camere width_h_70px">6 sits</div>
<div class="camere width_h_70px" style="border-collapse: separate; border-spacing: 10px; border-left:4px solid #1a9d13;">Pronta</div>
</div>
<div class="wide"></div>
<div class="testata_uno">
<div class="camere width_h_160px">[#3]CAR 3</div>
<div class="camere width_h_70px">6 sits</div>
<div class="camere width_h_70px" style="border-collapse: separate; border-spacing: 10px; border-left:4px solid #1a9d13;">Pronta</div>
</div>
<div class="wide"></div>
</div>
<div id="calendario">
<div class="height_30" align="center">Luglio 2016</div>
<div style="float:left; width:1280px;">
<div class="giorno_calendario">01</div><div class="giorno_calendario">02</div><div class="giorno_calendario">03</div><div class="giorno_calendario">04</div><div class="giorno_calendario">05</div><div class="giorno_calendario">06</div><div class="giorno_calendario">07</div><div class="giorno_calendario">08</div><div class="giorno_calendario">09</div><div class="giorno_calendario">10</div><div class="giorno_calendario">11</div><div class="giorno_calendario">12</div><div class="giorno_calendario">13</div><div class="giorno_calendario">14</div><div class="giorno_calendario">15</div><div class="giorno_calendario">16</div><div class="giorno_calendario">17</div><div class="giorno_calendario">18</div><div class="giorno_calendario">19</div><div class="giorno_calendario">20</div><div class="giorno_calendario">21</div><div class="giorno_calendario">22</div><div class="giorno_calendario">23</div><div class="giorno_calendario">24</div><div class="giorno_calendario">25</div><div class="giorno_calendario">26</div><div class="giorno_calendario">27</div><div class="giorno_calendario">28</div><div class="giorno_calendario">29</div><div class="giorno_calendario">30</div><div class="giorno_calendario">31</div> </div>
<div class="ccarrow">
<!--<div style="float:left; position:fixed; padding-right:3px; width:240px; border-right:2px solid orange;">[#1]TRILO TP VM P101 </div>-->
<div style="float:left; width:1280px;">
<div class="ccarcell" id="1_0_2016-07-01"></div><div class="ccarcell" id="1_0_2016-07-02"></div><div class="ccarcell" id="1_0_2016-07-03"></div><div class="ccarcell" id="1_0_2016-07-04"></div><div class="ccarcell" id="1_0_2016-07-05"></div><div class="ccarcell" id="1_0_2016-07-06"></div><div class="ccarcell" id="1_0_2016-07-07"></div><div class="ccarcell" id="1_0_2016-07-08"></div><div class="ccarcellbook wider" style="width: 573px" id="1_90_2016-07-09">Booking People 1</div><div class="ccarcell" id="1_0_2016-07-23"></div><div class="ccarcell" id="1_0_2016-07-24"></div><div class="ccarcell" id="1_0_2016-07-25"></div><div class="ccarcell" id="1_0_2016-07-26"></div><div class="ccarcell" id="1_0_2016-07-27"></div><div class="ccarcell" id="1_0_2016-07-28"></div><div class="ccarcell" id="1_0_2016-07-29"></div><div class="ccarcell" id="1_0_2016-07-30"></div><div class="ccarcell" id="1_0_2016-07-31"></div>
</div>
</div>
<div class="ccarrow">
<!--<div style="float:left; position:fixed; padding-right:3px; width:240px; border-right:2px solid orange;">[#2]TRILO TP VM P102</div>-->
<div style="float:left; width:1280px;">
<div class="ccarcell" id="2_0_2016-07-01"></div><div class="ccarcellbook wider" style="width: 573px" id="2_91_2016-07-02">Booking People 2</div><div class="ccarcellbook wider" style="width: 573px" id="2_89_2016-07-16">Booking People 3</div><div class="ccarcell" id="2_0_2016-07-30"></div><div class="ccarcell" id="2_0_2016-07-31"></div>
</div>
</div>
<div class="ccarrow">
<!--<div style="float:left; position:fixed; padding-right:3px; width:240px; border-right:2px solid orange;">[#3]TRILO TP VM P103</div>-->
<div style="float:left; width:1280px;">
<div class="ccarcell" id="3_0_2016-07-01"></div><div class="ccarcell" id="3_0_2016-07-02"></div><div class="ccarcell" id="3_0_2016-07-03"></div><div class="ccarcell" id="3_0_2016-07-04"></div><div class="ccarcell" id="3_0_2016-07-05"></div><div class="ccarcell" id="3_0_2016-07-06"></div><div class="ccarcell" id="3_0_2016-07-07"></div><div class="ccarcell" id="3_0_2016-07-08"></div><div class="ccarcell" id="3_0_2016-07-09"></div><div class="ccarcell" id="3_0_2016-07-10"></div><div class="ccarcell" id="3_0_2016-07-11"></div><div class="ccarcell" id="3_0_2016-07-12"></div><div class="ccarcell" id="3_0_2016-07-13"></div><div class="ccarcell" id="3_0_2016-07-14"></div><div class="ccarcell" id="3_0_2016-07-15"></div><div class="ccarcell" id="3_0_2016-07-16"></div><div class="ccarcell" id="3_0_2016-07-17"></div><div class="ccarcell" id="3_0_2016-07-18"></div><div class="ccarcell" id="3_0_2016-07-19"></div><div class="ccarcell" id="3_0_2016-07-20"></div><div class="ccarcell" id="3_0_2016-07-21"></div><div class="ccarcell" id="3_0_2016-07-22"></div><div class="ccarcell" id="3_0_2016-07-23"></div><div class="ccarcell" id="3_0_2016-07-24"></div><div class="ccarcell" id="3_0_2016-07-25"></div><div class="ccarcell" id="3_0_2016-07-26"></div><div class="ccarcell" id="3_0_2016-07-27"></div><div class="ccarcell" id="3_0_2016-07-28"></div><div class="ccarcell" id="3_0_2016-07-29"></div><div class="ccarcell" id="3_0_2016-07-30"></div><div class="ccarcell" id="3_0_2016-07-31"></div>
</div>
</div>
</div>
</div> <!-- end calendario -->
</div>
<div id="risposta"></div>
</body>
</html>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.ccarcellbook').draggable({
helper : 'clone',
cursor : 'move',
snap : '.ccarcell',
snapMode : 'inner'
});
$('.ccarcell').droppable({
over: function(event, ui) {
var $this = $(this);
},
drop:function(event, ui) {
alert($(this).attr('id'))
}
});
});//]]>
</script>