请有人帮我解决这些问题。我需要使用拖放将它们从一个列移动到另一个列。实际上它们被拖放但我需要在选定的列中正确排列它们。
<head>
<style type="text/css">
.header {
background-color: #C0C0C0;
height:70px;
width:1308px;
border: solid;
border-width: 1px;
;
}
.columns {
background: #C1C1C1;
height:400px;
width: 1308px;
border: solid;
border-width: 1px
}
.col {
background: #C1C1C1;
float:left;
height:400px;
width: 325px;
border: solid;
border-width: 1px;
position: relative;
}
.box {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
}
#box1 {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
margin-top: 3px;
margin-left: 5px;
}
#box1.moveable {
background:#333;
border: solid;
border-width: 1px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
}
#box2 {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
margin-top: 3px;
margin-left: 5px;
}
#box2.moveable {
background:#333;
border: solid;
border-width: 1px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
}
#box3 {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
margin-top: 3px;
margin-left: 5px;
}
#box3.moveable {
background:#333;
border: solid;
border-width: 1px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
}
#box4 {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
margin-top: 3px;
margin-left: 5px;
}
#box4.moveable {
background:#333;
border: solid;
border-width: 1px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function startMove() {
$(".movable").on("mousemove", function(event) {
var thisX = event.pageX - $(this).width() / 2,
thisY = event.pageY - $(this).height() / 2;
$(".movable").offset({
left: thisX,
top: thisY
});
$(this.parent()).detach().css({
top: 0,
left: 0
}).appendChild();
});
}
$(document).ready(function() {
$("#box1").on("mousedown", function() {
$(this).addClass("movable");
startMove();
}).on("mouseup", function() {
$(this).removeClass("movable");
console.log($(this).attr('id'));
});
$("#box2").on("mousedown", function() {
$(this).addClass("movable");
startMove();
}).on("mouseup", function() {
$(this).removeClass("movable");
console.log($(this).attr('id'));
});
$("#box3").on("mousedown", function() {
$(this).addClass("movable");
startMove();
}).on("mouseup", function() {
$(this).removeClass("movable");
console.log($(this).attr('id'));
});
$("#box4").on("mousedown", function() {
$(this).addClass("movable");
startMove();
}).on("mouseup", function() {
$(this).removeClass("movable");
console.log($(this).attr('id'));
});
});;
</script>
</head>
<body>
<div class="header">
<p style="text-align: center; font-size: 20px;">header</p>
</div>
<div class="columns">
<div class="col" id="column1">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
<div class="col" id="column2">
<div class="box" id="box3"></div>
</div>
<div class="col" id="column3"></div>
<div class="col" id="column4">
<div class="box" id="box4"></div>
</div>
</div>