Maison > interface Web > js tutoriel > le corps du texte

基于jquery实现的鼠标拖拽元素复制并写入效果_jquery

WBOY
Libérer: 2016-05-16 18:03:11
original
1186 Les gens l'ont consulté

直接上代码:

复制代码 代码如下:





鼠标拖拽复制效果


<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






Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal