所以我试图将按钮放在img元素上.我已经能够使用一些CSS,但为了让它们垂直放置,我使用了填充.这似乎导致正确的按钮触发问题.似乎唯一的图标就是moveDown图标.这似乎是由于使用了填充.
有任何想法吗?
function moveItUp() {
$(".moveUp").off("click").on("click", function() {
var moveUpId = $(this).closest("div").attr("id");
console.log("moveupClicked")
console.log(moveUpId)
})
}
function moveItDown() {
$(".moveDown").off("click").on("click", function() {
var moveDownId = $(this).closest("div").attr("id");
console.log("moveDownClicked")
})
}
moveItUp();
moveItDown();
.track img {
position: relative;
float: left;
height: 75px;
border-radius: 0px;
}
.soundMove{
position: relative;
text-align: center;
font-size: 2.5em;
}
.moveUp{
cursor: pointer;
position: absolute;
left: 0;
top: -10;
z-index: 10;
padding-left: 15px;
color: white !important;
}
.moveDown{
cursor: pointer;
position: absolute;
left: 0;
top: 0;
padding-top: 35px;
padding-left: 15px;
z-index: 10;
color: white !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
<div class='track' id='test'>
<div class="soundMove">
<i class="moveUp fa fa-arrow-up"></i>
<i class="moveDown fa fa-arrow-down"></i>
</div>
<img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
</div>
</div>
HTML
<div id="queueList" class="queueListDiv col-md-4">
<div class='track' id='test'>
<div class="soundMove">
<i class="moveUp fa fa-arrow-up"></i>
<i class="moveDown fa fa-arrow-down"></i>
</div>
<img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
</div>
</div>
CSS
.track img {
position: relative;
float: left;
height: 75px;
border-radius: 0px;
}
.soundMove{
position: relative;
text-align: center;
font-size: 2.5em;
}
.moveUp{
cursor: pointer;
position: absolute;
left: 0;
top: -10;
z-index: 10;
padding-left: 15px;
color: white !important;
}
.moveDown{
cursor: pointer;
position: absolute;
left: 0;
top: 0;
padding-top: 35px;
padding-left: 15px;
z-index: 10;
color: white !important;
}
JS
function moveItUp() {
$(".moveUp").off("click").on("click", function() {
var moveUpId = $(this).closest("div").attr("id");
console.log("moveupClicked")
console.log(moveUpId)
console.log(queueList)
arrayMoveUp(queueList, moveUpId)
console.log(queueList)
})
}
function moveItDown() {
$(".moveDown").off("click").on("click", function() {
var moveDownId = $(this).closest("div").attr("id");
console.log("moveDownClicked")
console.log(queueList);
arrayMoveDown(queueList, moveDownId)
console.log(queueList);
})
}
这是小提琴https://jsfiddle.net/m6wm8jcf/
最佳答案 好的,我想你可以做到这一点.
function arrayMoveDown(arr, fromIndex) {
var element = arr[fromIndex];
arr.splice(fromIndex, 1);
arr.splice(fromIndex + 1, 0, element)
}
function arrayMoveUp(arr, fromIndex) {
var element = arr[fromIndex];
arr.splice(fromIndex, 1);
arr.splice(fromIndex - 1, 0, element)
}
function moveItUp() {
$(".moveUp").off("click").on("click", function() {
var moveUpId = $(this).closest("div").attr("id");
console.log("moveupClicked")
console.log(moveUpId)
});
}
function moveItDown() {
$(".moveDown").off("click").on("click", function() {
var moveDownId = $(this).closest("div").attr("id");
console.log("moveDownClicked")
});
}
moveItUp();
moveItDown();
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
.track {position: relative;}
.track img {
height: 75px;
border-radius: 0px;
}
.soundMove{
font-size: 2em;
}
.moveUp{
cursor: pointer;
position: absolute;
top: 5px;
z-index: 10;
left: 15px;
color: white !important;
}
.moveDown {
cursor: pointer;
position: absolute;
left: 0;
bottom: 5px;
left: 15px;
z-index: 10;
color: white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
<div class='track' id='test'>
<div class="soundMove">
<i class="moveUp fa fa-arrow-up"></i>
<i class="moveDown fa fa-arrow-down"></i>
</div>
<img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
</div>
</div>