使用 appendTo 使 div 更改父项 [英] Using appendTo to make a div change parents
问题描述
因此,我决定学习使用 JS 和 jQuery 编程的最佳方式是尝试构建我喜欢的东西.所以我决定使用最少的 HTML 和主要的 JS 和 Jquery 来制作我自己的国际象棋棋盘.
So I decided that the best way for me to learn to program with JS and jQuery was to try and build something that I liked. So I decided to make my own Chess board using minimal HTML and Mostly JS and Jquery.
下面的代码渲染一个板并在图块的起始位置插入图像.
The code below renders a board and inserts images on the starting positions of the tiles.
$(document).ready(function(){
//draw the chess board
var amount = 0;
var columnColor = "Black";
while(amount < 64){
if(amount % 9 === 0){
amount++
}
else if (amount < 18){
$(".mainWrapper").append('<div class="block'+columnColor+'"><img class="pawn" src="images/whitePawn.png" alt="White Pawn" height="42" width="42"></div>')
amount++
}
else if (amount > 45){
$(".mainWrapper").append('<div class="block'+columnColor+'"><img class="pawn" src="images/blackPawn.png" alt="White Pawn" height="42" width="42"></div>')
amount++
}
else{
$(".mainWrapper").append('<div class="block'+columnColor+'"></div>')
amount++
}
switch (columnColor){
case "White":
columnColor = "Black";
break;
case "Black":
columnColor = "White";
break;
}
};
});
console.log("I ran! :D");
我的下一步是让碎片能够移动.现在一开始我想我会通过使用 jQuery 他的 .draggable
方法来做到这一点.哪个有效(有点)但没有做我想要的,因为它不会以干净的方式移动它们(碎片可以重叠方块)并且它不限制用户可以移动的方块数量.
My next step would be to make the pieces be able to move. Now at first I figured I would do this by using jQuery his .draggable
method. Which works (sort of) but doesn't do what I want it to since it doesn't move them in a clean way (pieces can overlap squares) and it doesn't limit the amount of squares a user can move.
后来在谷歌上快速搜索,我发现了这个 在 Stackoverflow 上发帖.他们在那里描述了一种使用 appendTo
将项目移动到另一个父 div 的方法.这对我的情况来说是完美的(至少我认为).
So a quick google search later and I found THIS post on Stackoverflow. There they described a way to use appendTo
to move items to another parent div. This would be perfect (at least I think) for my situation.
虽然我对 JS 的理解仍然有限,但我无法理解如何做到这一点.
Although since my understanding of JS is still limited I cant wrap my head around how to do that.
我知道您需要为所选图像使用某种选择器类.然后需要一个 click
事件,将选中的图片移动到你点击的 div 上.
I understand that you would need some kind of selector class for a selected image. Then there needs to be a click
event that moves the selected image to the div you clicked on.
只是为了您的娱乐,我无法超越这个.
Just for your entertainment I couldn't surpass THIS.
感谢任何帮助或提示!
推荐答案
您可以将一个字段上的 mousedown
与相邻字段上的 mouseup
组合起来:
You could combine a mousedown
on one field with a mouseup
on the adjacent one :
var piece;
$('div').mousedown(function(e) {
e.preventDefault();
piece = $(this).find('img');
})
.mouseup(function() {
$(this).append(piece); // same as piece.appendTo(this);
});
当然距离还没有限制,它不适用于整个领域(如果有图像).
There's no limit to the distance yet of course and it ill work for the whole field (if there is an image).
我添加了一个 preventDefault()
所以没有选择使拖动复杂化的元素.
I've added a preventDefault()
so there's no selection of the element which complicates dragging.
为了包含这些片段,您可能必须使用字段的坐标来获得直接的方法.您可能想为此查看 e.clientX
和 getBoundingClientRect
.
For containing the pieces you'll probably have to work with the coordinates of the fields for a straight forward approach. You might wanna look into e.clientX
and getBoundingClientRect
for that.
这篇关于使用 appendTo 使 div 更改父项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!