我遇到了一个挑战，我有一个日程计划员，我有15分钟的间隔。每15分钟间隔为15px。我有一个可拖动的区域，其高度基于分钟数。简而言之，一小时将是60px高。挑战在于，当我放入我的快照div时，我似乎会抓住可拖动对象中间的div。我需要它来捕捉到左上角。
$(function() {
$(".draggable" ).draggable({
snap: ".snap",
snapMode: "inner",
revert: "invalid",
cursor: "move",
handle: ".eventtitle"
});
$( ".snap" ).droppable({
drop: function( event, ui ) {
var $drag = $(ui.draggable)
var $drop = $(this);
console.log( $drag.data( "eventid" ) );
console.log( $drop.data( "timeslot" ) );
}
});
});
<style>
.content{
width:600px;
}
.content .column1{
width:60%;
float: left;
}
.content .column2{
width:40%;
float: right;
}
.daycontainer{
width:150px;
height:600px;
border:1px solid #003366;
}
.daycontainer .title{
width:100%;
background:silver;
text-align: center;
}
.daycontainer .timecontainer{
width:100%;
line-height: 15px;
height: 64px;
}
.daycontainer .timecontainer .hour{
width:15%;
float: left;
text-align: right;
font-size:14px;
}
.daycontainer .timecontainer .mincontainer{
width:85%;
float: right;
font-size:12px;
}
.daycontainer .timecontainer .mincontainer .minute{
width:15%;
float: left;
vertical-align:top;
background:#cdcdcd;
height: 15px;
}
.daycontainer .timecontainer .mincontainer .snap{
width:85%;
float: right;
border-bottom:1px solid #003366;
height: 15px;
}
.eventcontainer{
border:1px solid #003366;
width: 150px;
}
.eventcontainer .title{
width:100%;
background:#8fbc8f;
text-align: center;
}
.event{
width: 106px;
height: 60px;
background:#afeeee;
margin: 2px;
}
.event2{
width: 106px;
height: 120px;
background:#afeeee;
margin: 2px;
}
.eventtitle{
width: 100px;
line-height: 15px;
height: 15px;
font-size:12px;
background:#b8860b;
padding: 3px;
vertical-align:top;
}
.eventdetail {
border: 1px solid red;
}
<div class="content">
<div class="column1">
<div class="daycontainer">
<div class="title">Monday</div>
<div class="timecontainer">
<div class="hour">8:</div>
<div class="mincontainer">
<div class="minute">00</div><div class="snap" data-timeslot="8:00">8a</div>
<div class="minute">15</div><div class="snap" data-timeslot="8:15">8b</div>
<div class="minute">30</div><div class="snap" data-timeslot="8:30">8c</div>
<div class="minute">45</div><div class="snap" data-timeslot="8:45">8d</div>
</div>
</div>
<div class="timecontainer">
<div class="hour">9:</div>
<div class="mincontainer">
<div class="minute">00</div><div class="snap" data-timeslot="9:00">9a</div>
<div class="minute">15</div><div class="snap" data-timeslot="9:15">9b</div>
<div class="minute">30</div><div class="snap" data-timeslot="9:30">9c</div>
<div class="minute">45</div><div class="snap" data-timeslot="9:45">9d</div>
</div>
</div>
<div class="timecontainer">
<div class="hour">10:</div>
<div class="mincontainer">
<div class="minute">00</div><div class="snap" data-timeslot="10:00">10a</div>
<div class="minute">15</div><div class="snap" data-timeslot="10:15">10b</div>
<div class="minute">30</div><div class="snap" data-timeslot="10:30">10c</div>
<div class="minute">45</div><div class="snap" data-timeslot="10:45">10d</div>
</div>
</div>
<div class="timecontainer">
<div class="hour">11:</div>
<div class="mincontainer">
<div class="minute">00</div><div class="snap" data-timeslot="11:00">11a</div>
<div class="minute">15</div><div class="snap" data-timeslot="11:15">11b</div>
<div class="minute">30</div><div class="snap" data-timeslot="11:30">11c</div>
<div class="minute">45</div><div class="snap" data-timeslot="11:45">11d</div>
</div>
</div>
<div class="timecontainer">
<div class="hour">12:</div>
<div class="mincontainer">
<div class="minute">00</div><div class="snap" data-timeslot="12:00">12a</div>
<div class="minute">15</div><div class="snap" data-timeslot="12:15">12b</div>
<div class="minute">30</div><div class="snap" data-timeslot="12:30">12c</div>
<div class="minute">45</div><div class="snap" data-timeslot="12:45">12d</div>
</div>
</div>
<div class="timecontainer">
<div class="hour">1:</div>
<div class="mincontainer">
<div class="minute">00</div><div class="snap" data-timeslot="1:00">1a</div>
<div class="minute">15</div><div class="snap" data-timeslot="1:15">1b</div>
<div class="minute">30</div><div class="snap" data-timeslot="1:30">1c</div>
<div class="minute">45</div><div class="snap" data-timeslot="1:45">1d</div>
</div>
</div>
<div class="timecontainer">
<div class="hour">2:</div>
<div class="mincontainer">
<div class="minute">00</div><div class="snap" data-timeslot="2:00">2a</div>
<div class="minute">15</div><div class="snap" data-timeslot="2:15">2b</div>
<div class="minute">30</div><div class="snap" data-timeslot="2:30">2c</div>
<div class="minute">45</div><div class="snap" data-timeslot="2:45">2d</div>
</div>
</div>
<div class="timecontainer">
<div class="hour">3:</div>
<div class="mincontainer">
<div class="minute">00</div><div class="snap" data-timeslot="3:00">3a</div>
<div class="minute">15</div><div class="snap" data-timeslot="3:15">3b</div>
<div class="minute">30</div><div class="snap" data-timeslot="3:30">3c</div>
<div class="minute">45</div><div class="snap" data-timeslot="3:45">3d</div>
</div>
</div>
<div class="timecontainer">
<div class="hour">4:</div>
<div class="mincontainer">
<div class="minute">00</div><div class="snap" data-timeslot="4:00">4a</div>
<div class="minute">15</div><div class="snap" data-timeslot="4:15">4b</div>
<div class="minute">30</div><div class="snap" data-timeslot="4:30">4c</div>
<div class="minute">45</div><div class="snap" data-timeslot="4:45">4d</div>
</div>
</div>
</div>
</div>
<div class="column2">
<div class="eventcontainer">
<div class="title">Events</div>
<div class="eventlist snap">
<div id="draggable" class="event draggable" data-eventid="1234">
<div class="eventtitle"><img src="../../common_files/images/FillLeftHS.png"> Event 1</div>
<div class="eventdetail">some crap</div>
</div>
<div id="draggable2" class="event2 draggable" data-eventid="3456">
<div class="eventtitle">Event 2</div>
<div class="eventdetail">look over there</div>
</div>
</div>
</div>
</div>