div的换位

2015-09-01 05:00:42 194 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

wen19910312 墨衍会员 · AI 创作全网分发关注 + 加入社区

原生js写九宫格拖拽换位使用原生JS写出一个九宫格，实现九个格子何以拖拽换位的效果效果演示具体思路分析和代码：图解1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t 阅读详情

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title></title>

<style type="text/css">

    #div1,#div2 {width:550px;height:565px;overflow-y:scroll;border:1px solid #000;overflow-style:marquee,panner;}

    #div2{ position:absolute;left:720px;top:28px;}

      #hk2,#hk1,#hk3,#hk4,#hk5,#hk6{width:158px;height:180px;padding-left:10px;margin:2px;

            background-color:#eee;

            -moz-border-radius: 15px; 

        -webkit-border-radius: 15px;float:left;}

    .bn1,.bn2{ width:85px;height:31px; border:none;outline:none;cursor:pointer;background:url(bn.png) left top no-repeat;color:#fff;font-size:16px;font-weight:bold;}

    .bn1{ position:absolute;left:600px;top:180px;}

    .bn2{ position:absolute;left:600px;top:260px}

	.aaa{background:red!important;}

</style>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

	<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>

</head>

<body>

<div id="doy">

<div id="div1">

        <div id="hk1"  >

        </div>

        <div id="hk2"  >

        </div>

        <div id="hk3"  >

        </div>

        <div id="hk4"  >

        </div>

        <div id="hk5"  >

        </div>

        <div id="hk6"  >

        </div>

</div>

<div id="div2">

</div>

    <!--点击-->

    <input type="button" class="bn1" onclick="left_click()" value=">">

    <input type="button" class="bn2" onclick="right_click()" value="<">

</body>

</html>

	<script>

		$('#div1,#div2').on('click','div',function(){$(this).addClass('aaa')})

			function left_click(){

				$('#div1 .aaa').appendTo('#div2').removeClass('aaa')

			}

			function right_click(){

				$('#div2 .aaa').appendTo('#div1').removeClass('aaa')

			}

		

	</script>

感谢给这段代码的高手。现已实现以上功能,但是我还想要点一下变色,在点一下就不变色。移动过去后新创建一个div,移动回来新创建的div就消失。就差此2个功能了,我才学这，感觉这应用比较有意思。。谢谢高手不全。。在此像各前辈学习

...全文

超详细YOLOv8目标检测全程概述：环境、训练、验证与预测详解这篇博文提供了一个关于使用YOLOv8进行目标检测的全面指南，包括环境搭建、模型训练、验证和预测的详细步骤，以及如何解释训练过程中生成的各种图表和数据。整篇文章为读者提供了一个关于如何利用YOLOv8进行目标检测的实践指南，从环境搭建到模型部署，再到结果分析，每一部分都给出了详细的步骤和解释。此外，还有对于模型输出的解释，帮助读者更好地理解和使用YOLOv8模型。阅读详情

wen19910312

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

wen19910312 2015-09-06

打赏
举报

引用 8 楼 wen19910312 的回复:

[quote=引用 7 楼 jslang 的回复:] [quote=引用 4 楼 wen19910312 的回复:] 但是还是有一个小bug? 就是新创建的.bbb 没加条件。当你没已过去就点移动按钮的时候还是会出现，我想要的效果是，移动过去一张或者几张就出现1或N张bbb 现在就是只要点了左移就出现一次XXX 右移就报错。。。



		$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')});
			function left_click(){
				var aaa = $('#div1 .aaa');
				aaa.appendTo('#div2').removeClass('aaa');
				for(var i = 0; i < aaa.length; i++)
					$('#div1').append("<span>12345</span>");
			}
			function right_click(){
				var aaa = $('#div2 .aaa');
				aaa.appendTo('#div1').removeClass('aaa');
				for(var i = 0; i < aaa.length; i++)
					$('#div1 span:last').remove();
			}

[/quote] 还是没完善，新出来的12345 还是占了位置，我把sapn 换做了div 。就是要新创建出来的span或是div 不能点。且左边过去到div2里面的内容要过来的话，之前所创建的span或者div 要消失。。[/quote] 没人了

香蕉猪 2015-09-02

打赏
举报

那就再加个监控，，，监控div的位置是不是发生了改变。

wen19910312 2015-09-02

打赏
举报

引用 3 楼 wen19910312 的回复:

[quote=引用 1 楼 jslang 的回复:]


		$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')})
			function left_click(){
				$('#div1 .aaa').appendTo('#div2').removeClass('aaa');
				$('#div1').append("<div class='bbb'>xxxxx</div>");
			}
			function right_click(){
				$('#div2 .aaa').appendTo('#div1').removeClass('aaa');
				$('#div1 .bbb:last').remove();
			}

引用 2 楼 wen19910312 的回复:

[quote=引用 1 楼 jslang 的回复:]


		$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')})
			function left_click(){
				$('#div1 .aaa').appendTo('#div2').removeClass('aaa');
				$('#div1').append("<div class='bbb'>xxxxx</div>");
			}
			function right_click(){
				$('#div2 .aaa').appendTo('#div1').removeClass('aaa');
				$('#div1 .bbb:last').remove();
			}

这下面的的.bbb 是什么？还有做的点击第二次消除颜色呢？[/quote] 对不起没看清楚，功能都实现了。真是强大如此精短的代码就实现了果然还是经验问题受教了[/quote] 但是还是有一个小bug? 就是新创建的.bbb 没加条件。当你没已过去就点移动按钮的时候还是会出现，我想要的效果是，移动过去一张或者几张就出现1或N张bbb 现在就是只要点了左移就出现一次XXX 右移就报错。。。

wen19910312 2015-09-02

打赏
举报

引用 1 楼 jslang 的回复:


		$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')})
			function left_click(){
				$('#div1 .aaa').appendTo('#div2').removeClass('aaa');
				$('#div1').append("<div class='bbb'>xxxxx</div>");
			}
			function right_click(){
				$('#div2 .aaa').appendTo('#div1').removeClass('aaa');
				$('#div1 .bbb:last').remove();
			}

引用 2 楼 wen19910312 的回复:

[quote=引用 1 楼 jslang 的回复:]


		$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')})
			function left_click(){
				$('#div1 .aaa').appendTo('#div2').removeClass('aaa');
				$('#div1').append("<div class='bbb'>xxxxx</div>");
			}
			function right_click(){
				$('#div2 .aaa').appendTo('#div1').removeClass('aaa');
				$('#div1 .bbb:last').remove();
			}

这下面的的.bbb 是什么？还有做的点击第二次消除颜色呢？[/quote] 对不起没看清楚，功能都实现了。真是强大如此精短的代码就实现了果然还是经验问题受教了

wen19910312 2015-09-02

打赏
举报

引用 1 楼 jslang 的回复:


		$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')})
			function left_click(){
				$('#div1 .aaa').appendTo('#div2').removeClass('aaa');
				$('#div1').append("<div class='bbb'>xxxxx</div>");
			}
			function right_click(){
				$('#div2 .aaa').appendTo('#div1').removeClass('aaa');
				$('#div1 .bbb:last').remove();
			}

这下面的的.bbb 是什么？还有做的点击第二次消除颜色呢？

wen19910312 2015-09-02

打赏
举报

引用 7 楼 jslang 的回复:

[quote=引用 4 楼 wen19910312 的回复:] 但是还是有一个小bug? 就是新创建的.bbb 没加条件。当你没已过去就点移动按钮的时候还是会出现，我想要的效果是，移动过去一张或者几张就出现1或N张bbb 现在就是只要点了左移就出现一次XXX 右移就报错。。。



		$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')});
			function left_click(){
				var aaa = $('#div1 .aaa');
				aaa.appendTo('#div2').removeClass('aaa');
				for(var i = 0; i < aaa.length; i++)
					$('#div1').append("<span>12345</span>");
			}
			function right_click(){
				var aaa = $('#div2 .aaa');
				aaa.appendTo('#div1').removeClass('aaa');
				for(var i = 0; i < aaa.length; i++)
					$('#div1 span:last').remove();
			}

[/quote] 还是没完善，新出来的12345 还是占了位置，我把sapn 换做了div 。就是要新创建出来的span或是div 不能点。且左边过去到div2里面的内容要过来的话，之前所创建的span或者div 要消失。。

天际的海浪 2015-09-02

打赏
举报

引用 4 楼 wen19910312 的回复:

但是还是有一个小bug? 就是新创建的.bbb 没加条件。当你没已过去就点移动按钮的时候还是会出现，我想要的效果是，移动过去一张或者几张就出现1或N张bbb 现在就是只要点了左移就出现一次XXX 右移就报错。。。



		$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')});
			function left_click(){
				var aaa = $('#div1 .aaa');
				aaa.appendTo('#div2').removeClass('aaa');
				for(var i = 0; i < aaa.length; i++)
					$('#div1').append("<span>12345</span>");
			}
			function right_click(){
				var aaa = $('#div2 .aaa');
				aaa.appendTo('#div1').removeClass('aaa');
				for(var i = 0; i < aaa.length; i++)
					$('#div1 span:last').remove();
			}

wen19910312 2015-09-02

打赏
举报

引用 5 楼 gy127132060 的回复:

那就再加个监控，，，监控div的位置是不是发生了改变。

怎么做呀新手呢还有新创建的xxx 不能点又怎么做

天际的海浪 2015-09-01

打赏
举报


		$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')})
			function left_click(){
				$('#div1 .aaa').appendTo('#div2').removeClass('aaa');
				$('#div1').append("<div class='bbb'>xxxxx</div>");
			}
			function right_click(){
				$('#div2 .aaa').appendTo('#div1').removeClass('aaa');
				$('#div1 .bbb:last').remove();
			}

div的换位

相关推荐