Home > Web Front-end > JS Tutorial > body text

Copy and write effect of mouse dragging elements based on jquery_jquery

WBOY
Release: 2016-05-16 18:03:11
Original
1185 people have browsed it

直接上代码:

复制代码 代码如下:





鼠标拖拽复制效果


<script> <br>$(function(){ <br>$("#left li").click(function(e) { <br>var index=$(this).index(); <br>$("#left li").removeClass("selected"); <br>$(this).addClass("selected"); <br>$("#right ul").removeClass('show'); <br>$("#right ul").addClass('hide'); <br>$("#right ul").eq(index).removeClass('hide'); <br>$("#right ul").eq(index).addClass('show'); <br>}); <br><br><br>$("#left ul li").mousemove(function(e) { <br>if($(this).attr('class')!='selected'&&$(".clone").length>0) <br>{ <br>$(this).addClass('over'); <br>} <br>}); <br>$("#left ul li").mouseout(function(e) { <br>if($(this).attr('class')!='selected') <br>{ <br>$(this).removeClass('over'); <br>} <br>}); <br>$("#left ul li").mouseup(function(e) { <br>if($(this).attr('class')!='selected'&&$(".clone").length>0) <br>{ <br>var index=$(this).index(); <br>//$("#right ul").eq(index).prepend($(".clone")); <br>$(".clone").appendTo($("#right ul").eq(index)); <br>$(".clone").attr('class',''); <br>} <br>}); <br>$("#right ul li").mousedown(function(e) {//鼠标按下,鼠标变移动标志,克隆元素,并确定新克隆元素位置 <br>$(this).clone().addClass("clone").appendTo($("body")); <br>$("body").css('cursor','move'); <br>$(".clone").css('left',e.clientX 1); <br>$(".clone").css('top',e.clientY 1); <br><br>}); <br>$(document).mousemove(function(e){ <br>if($(".clone").length>0) <br>{ <br>$(".clone").css('left',e.clientX 1); <br>$(".clone").css('top',e.clientY 1); <br>} <br>}); <br>$(document).mouseup(function(e){ <br>$(".clone").remove(); <br>$("body").css('cursor','auto'); <br>}); <br>}); <br></script>





  • 组一

  • 组2

  • 组3






Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template