ホームページ > 記事 > ウェブフロントエンド > jquery_jquery に基づくマウス ドラッグ要素のコピーと書き込みの効果
jquery_jquery に基づくマウス ドラッグ要素のコピーと書き込みの効果
- WBOYオリジナル
- 2016-05-16 18:03:111150ブラウズ
直接上代コード：
复制代代码如下:
body{ line-height:150% }
.show{ display:block}
.hide{ display:none}
.clone{position: 絶対;ボーダー:1px ソリッド #666;背景色:#CCCCCC;}
.over{ border:1px ソリッド #666;}
#left{ float:left;幅:200ピクセル; border:1pxソリッド#666;}
#left li.selected{background-color:#CCCCCC}
#right{ margin-left:220px; border:1px ソリッド #666;}
$(function(){
$("#left li").click(function(e) {
varindex=$(this).index();
$("# left li").removeClass("selected");
$(this).addClass("selected");
$("#right ul").removeClass('show');
$ ("#right ul").addClass('hide');
$("#right ul").eq(index).removeClass('hide');
$("#right ul") .eq(index).addClass('show');
$("#left ul li").mousemove(function(e) {
if( $(this).attr('class')!='selected'&&$(".clone").length>0)
{
$(this).addClass('over'); >}
});
$("#left ul li").mouseout(function(e) {
if($(this).attr('class')!='selected')
{
$(this).removeClass('over');
}
});
$("#left ul li").mouseup(function(e) {
if($(this).attr('class')!='selected'&&$(".clone").length>0)
{
varindex=$(this).index( );
//$("#right ul").eq(index).prepend($(".clone"));
$(".clone").appendTo($("#right ul").eq(index));
$(".clone").attr('class','');
}
});
$("#right ul li").mousedown(function(e) {// ネズミ标按下，ネズミ标变移動标志，ク隆元素，并新しいク隆元素の位置を決定します
$(this).clone().addClass("clone")。 appendTo($("本文"));
$("body").css('cursor','move');
$(".clone").css('left',e.clientX 1);
$(".clone").css('top',e.clientY 1);
});
$(document).mousemove(function(e){
if($(".clone").length>0)
{
$(".clone").css(' left',e.clientX 1);
$(".clone").css('top',e.clientY 1);
$(document).mouseup(function(e){
$(".clone").remove();
$("body").css('cursor','auto') ;
});
});
- 组一
- 組2
- 組3
- 1姓名一
- 1姓名2
- 1姓名3
- 1姓名4
- 1姓名5
- 1姓名6
- 2姓名一
- 2姓名2
- 2姓名3
- 2姓名4
- 2姓名5
- 2姓名6
- 3姓名一
- 3姓名2
- 3姓名3
- 3姓名4
- 3姓名5
- 3姓名6