我是jquery的新手,所以我尝试从左到右放下三角形,使它们适合三角形网格。而且它们只能放在右侧div中。到目前为止,我知道了。棘手的是div看起来像三角形,但实际上它们是正方形。我用过JqueryUI
$(document).ready(function() {
$(function() {
$(".triangle-1,.triangle-2,.triangle-3,.triangle-4").draggable();
});
$(".up").mouseover(function() {
$(this).css("border-bottom-color", "gray");
});
$(".up").mouseleave(function() {
$(this).css("border-bottom-color", "floralwhite");
});
$(".up").droppable();
});
.container {
width: 1000px;
margin: 0 auto;
background: #ccc;
height: 500px;
}
.left {
background: lightgray;
height: 500px;
}
.triangle-1,
.triangle-2,
.triangle-3,
.triangle-4 {
cursor: pointer;
position: absolute;
z-index: 10;
width: 0;
height: 0;
}
.triangle-1,
.triangle-2 {
border-top: 86px solid green;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.triangle-3,
.triangle-4 {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid red;
}
.up,
.down {
display: inline-block;
width: 0;
height: 0;
position: absolute;
z-index: 0;
}
.up {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid floralwhite;
left: 50px;
z-index: 0;
}
.down {
border-top: 86px solid floralwhite;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 left">
<div class="triangle-1"></div>
<div class="triangle-2"></div>
<div class="triangle-3"></div>
<div class="triangle-4"></div>
<div class="triangle-1"></div>
<div class="triangle-3"></div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="down" style="left:0">
</div>
<div class="up" style="left:50px">
</div>
<div class="down" style="left:100px">
</div>
<div class="up" style="left:150px">
</div>
<div class="down" style="left:200px">
</div>
<div class="up" style="left:250px">
</div>
<div class="down" style="left:300px">
</div>
<div class="up" style="left:350px">
</div>
<div class="down" style="left:400px">
</div>
</div>
</div>
</div>
</div>
我为每个drop
事件使用了一个函数,以将它们正确放置在网格上方的位置。有关doDrop
其工作原理的详细信息,请参见JS末尾的函数及其注释。
$(document).ready(function() {
$(function() {
$(".triangle-up,.triangle-down").draggable({});
$(".down").droppable({
drop: function(event, ui) {
doDrop(event, ui);
}
});
$(".up").droppable({
drop: function(event, ui) {
doDrop(event, ui);
}
});
});
$(".up").mouseover(function() {
$(this).css("border-bottom-color", "gray");
});
$(".up").mouseleave(function() {
$(this).css("border-bottom-color", "floralwhite");
});
});
function doDrop(event, ui) {
var dropElem = $(event.target);
var dragElem = ui.draggable;
var isUp = dragElem.hasClass("triangle-up");
// Check if we're dropping a .triangle-up into a .down
// or a .triangle-down into a .up
// If so, we'll choose either the next or previous
// sibling element to drop to, depending where the
// mouse is.
if (isUp && !dropElem.hasClass("up") ||
!isUp && !dropElem.hasClass("down")) {
// Get halfway point of drop element
var dropCentreX = dropElem.offset().left + (dropElem.outerWidth() / 2);
// Set drop element to next if more than halfway, else to previous
if (dropCentreX < event.pageX && dropElem.next()) {
dropElem = dropElem.next();
} else {
dropElem = dropElem.prev();
}
}
// Append so positioning is relative to drop element.
dropElem.append(dragElem);
// Few positioning calculations
var width = dropElem.outerWidth();
var height = dropElem.outerHeight();
var cntrLeft = (dragElem.outerWidth()/2) - width;
var cntrTop = (isUp) ? 0 : -height;
// Position to drag element within the drop element
dragElem.css({
left: (cntrLeft) + "px",
top: (cntrTop) + "px",
zIndex: "1001"
});
}
.container {
width: 1000px;
margin: 0 auto;
background: #ccc;
height: 500px;
}
.left {
background: lightgray;
height: 100px;
}
.triangle-down,
.triangle-up {
cursor: pointer;
position: absolute;
z-index: 10;
width: 0;
height: 0;
}
.triangle-down {
border-top: 86px solid green;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.triangle-up {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid red;
}
.up,
.down {
display: inline-block;
width: 0;
height: 0;
position: absolute;
z-index: 0;
}
.up {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid floralwhite;
left: 50px;
z-index: 0;
}
.down {
border-top: 86px solid floralwhite;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.right-side {
background-color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 left">
<div class="triangle-down"></div>
<div class="triangle-down"></div>
<div class="triangle-up"></div>
<div class="triangle-up"></div>
</div>
<div class="col-xs-6 right-side">
<div class="row">
<div class="down" style="left:0">
</div>
<div class="up" style="left:50px">
</div>
<div class="down" style="left:100px">
</div>
<div class="up" style="left:150px">
</div>
<div class="down" style="left:200px">
</div>
<div class="up" style="left:250px">
</div>
<div class="down" style="left:300px">
</div>
<div class="up" style="left:350px">
</div>
<div class="down" style="left:400px">
</div>
</div>
</div>
</div>
</div>
编辑修正为>
以<
在if (dropCentreX < event.pageX && dropElem.next())
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句