如何获得可拖动框的价值

时间:2017-07-10 10:25:25

标签: javascript jquery

如何获得可拖动的盒子的价值。



$(document).ready(function() {
    $(".inputs div").draggable({
        snap: ".spaces td div",
        snapMode: "inner"
    }).mousedown(function(){
        var targets = $(".spaces td div");
        targets.height(this.offsetHeight);
        targets.width(this.offsetWidth);
        targets.each(function(){
            $(this).position({ of: this.parentNode });
        });
    });
});

*{border-collapse:collapse;}
tr {
    border: 2px solid black;
}
table {
    border: 2px solid black;
}

.inputs div {
    float:left;
    color:#004E66;
    font-size:14px;
    margin:2px;
    padding:5px;
	height:30px;
    z-index: 2;
	width:100px;
	background-color:#f00;
}


.spaces td {
    border: 2px solid black;
    margin: 2px;
    padding: 20px;
    position: relative;
    width: 100px;
}

.spaces td div {
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="inputs">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
<br/>
<table class="spaces">
    <tr>
        <td><div>06:00</div></td>
    </tr>
	<tr>
        <td><div>07:00</div></td>
    </tr>
	<tr>
        <td><div>08:00</div></td>
    </tr>
    <tr>
        <td><div>09:00</div></td>
    </tr>
	<tr>
        <td><div>10:00</div></td>
    </tr>
    <tr>
        <td><div>11:00</div></td>
    </tr>
	<tr>
        <td><div>12:00</div></td>
    </tr>
</table>
&#13;
&#13;
&#13;

那么如何获得放置盒子的价值,如果我把盒子放在6个半,那么它应该给我看6:30 ......

实际上我按照以下图片创建时间选择器,如google ...

enter image description here

0 个答案:

没有答案