Jquery可拖放快照问题_Jquery - Fatal编程技术网

Jquery可拖放快照问题

jquery

Jquery可拖放快照问题,jquery,Jquery,我遇到了一个挑战，我有一个日程安排，我有15分钟的休息时间。每15分钟间隔为15px。我有一个可拖动的区域，其高度基于分钟数。所以简而言之，一个小时就是60像素高。挑战是，当我跌落到我的快车道上时，我似乎对我可拖动的物体中间的div啪的一声。我需要它弹到左上角 $(function() { $(".draggable" ).draggable({ snap: ".snap", snapMode: "inner", revert: "in

我遇到了一个挑战，我有一个日程安排，我有15分钟的休息时间。每15分钟间隔为15px。我有一个可拖动的区域，其高度基于分钟数。所以简而言之，一个小时就是60像素高。挑战是，当我跌落到我的快车道上时，我似乎对我可拖动的物体中间的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;
}

$（函数（）{
$（“.draggable”）.draggable（{
快照：“.snap”，
快照模式：“内部”，
回复：“无效”，
光标：“移动”，
句柄：“.eventtitle”
});
$（“.snap”）.droppable({
drop：函数（事件、用户界面）{
var$drag=$（ui.draggable）
var$drop=$（本）；
log（$drag.data（“eventid”）；
log（$drop.data（“时隙”）；
}
});
});
.内容{
宽度：600px；
}
.内容.第1栏{
宽度：60%；
浮动：左；
}
.内容.专栏2{
宽度：40%；
浮动：对；
}
.集装箱{
宽度：150px；
高度：600px；
边框：1px实心#003366；
}
.daycontainer.title{
宽度：100%；
背景：银；
文本对齐：居中；
}
.daycontainer.timecontainer{
宽度：100%；
线高：15px；
高度：64px；
}
.daycontainer.timecontainer.hour{
宽度：15%；
浮动：左；
文本对齐：右对齐；
字体大小：14px；
}
.daycontainer.timecontainer.mincontainer{
宽度：85%；
浮动：对；
字体大小：12px；
}
.daycontainer.timecontainer.mincontainer.minute{
宽度：15%；
浮动：左；
垂直对齐：顶部；
背景：cdcdcd；
高度：15px；
}
.daycontainer.timecontainer.mincontainer.snap{
宽度：85%；
浮动：对；
边框底部：1px实心#003366；
高度：15px；
}
.eventcontainer{
边框：1px实心#003366；
宽度：150px；
}
.eventcontainer.title{
宽度：100%；
背景#8fbc8f；
文本对齐：居中；
}
.事件{
宽度：106px；
高度：60px；
背景：阿菲；
保证金：2倍；
}
.事件2{
宽度：106px；
高度：120px；
背景：阿菲；
保证金：2倍；
}
.eventtitle{
宽度：100px；
线高：15px；
高度：15px；
字体大小：12px；
背景#b8860b；
填充：3倍；
垂直对齐：顶部；
}
.eventdetail{
边框：1px纯红；
}


星期一
8:
008a
158b
308c
458d
9:
009a
159b
309c
459d
10:
0010a
1510b
3010c
4510d
11:
0011a
1511b
3011c
4511d
12:
0012a
1512b
3012c
4512d
1:
001a
151b
301c
451d
2:
002a
152b
302c
452d
三：
003a
153b
303c
453d
4:
004a
154b
304c
454d
事件
事件1
一些垃圾
事件2
看那边

可能是重复的，谢谢你，查理。现在了解如何防止重叠。

<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">&nbsp;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>