手机 长按删除 html5,移动端长按删除

xl.gif

我的频道2

html{height: 100%;}

body{height: 100%;background: #F1F1F1;}


我的频道


• 

  批发商城

• 

  生日礼物

• 

  十元包邮

• 

  礼品资讯


主频道


• 

  供应

• 

  求购

• 

  招商加盟

• 

  展会资讯

• 

  团购

• 

  商家

• 

  品牌

• 

  送给谁

• 

  最新上市

• 

  排行榜

取消

确定

$(function(){

function fbottom(naan,x,time){ naan.animate({ bottom:x+"rem" }, time, 'ease-out') };

var myChannel = $(".my-channel-ul li div");//我的频道

var otherChannel = $(".other-channel-ul li div");//主频道

var allChannel = $(".channel-ul li div");//全部频道

var ms = "

请在下方选择一个主频道";

var skipFlag = false;

var addFlag = false;

var delFlag = false;

allChannel.on("longTap",function(event){//长按事件 所有上下的ul li 触发事件

$(".channel-ul .del").addClass("del-show"); // 出现小圆箭头 删除标志 显示

$(".channel-ul .clickDom").addClass("editD"); //给所有li 添加一个标识editd

$(".channel-ul li").removeClass("leng"); //给所有li 移除 leng 标识

$(".clickDom").show(); //在结尾的时候 添加遮罩层 禁止跳转

fbottom($(".feic1-bootm"),0,400); //顶部导航栏 出现

});

$(".my-channel-ul").on("touchstart touchmove touchend",".del-show", function(){//从我的频道删除

switch(event.type) {

case 'touchstart':delFlag = false;break;

case 'touchmove':delFlag = true;break;

case 'touchend':if( !delFlag ) {

$(this).removeClass("del-show"); //移除小箭头

$(this).parents("ul").children("li:last-child").after(ms)//添加提示按钮

var c_html ="

"+$(this).parent('div').clone(true).prop('outerHTML')+""; // 获取当前点击元素的HTML

$(this).parents("li").remove(); //移除当前点击的html

$(".other-channel-ul").append(c_html); //把当前的HTML 复制到下方去

}

break;

}

});

$(".other-channel-ul").on("touchstart touchmove touchend",".editD", function(){//从主频道往我的频道添加

switch(event.type) {

case 'touchstart':addFlag = false;break;

case 'touchmove':addFlag = true;break;

case 'touchend':if( !addFlag ) {

if($(".f-right").length > 0){

var d_html = $(this).parents('li').clone(true); // 获取每一个元素的 HTML

$(".my-channel-ul").prepend(d_html); // 在上面四个元素的前面添加 html

$(".my-channel-ul").find("li:last-child").remove(); //在上面四个元素在最后的一名元素 删除

$(this).parents("li").remove();// 删除下面十四个元素的当前对象

}else{

myLayer("已经满位啦！")//弹窗 当前对象

}

}

break;

}

})

$(".channel-ul").on("touchstart touchmove touchend","li.leng", function(event){//点击直接跳转

switch(event.type) {

case 'touchstart':skipFlag = false;break;

case 'touchmove':skipFlag = true;break;

case 'touchend':if( !skipFlag ) {

var theLink = $(this).attr("skip")

location.href = theLink

console.log('点击');

}

break;

}

})

$(".feic1-bootm").on("touchend",".sub-btn", function(){//提交

if($(".my-channel-ul .f-right").length >0){

myLayer("请选择4个你喜欢的频道")

}else{

refresh();

}

});

$(".feic1-bootm").on("touchend",".cancel-btn", function(){//取消

refresh();

});

function refresh(){//刷新

window.location.reload();

}

function myLayer(msg){

layer.open({

content: msg,

skin: 'msg',

style: 'border:none;padding:0.2rem 0.5rem;font-size:0.3rem;color:#fff;top:50%;',

time: 2 //2秒后自动关闭

});

}

})

/*频道选择*/

.gary-bg-divv{width: 100%;background: #F1F1F1;padding-top: 0.4rem;font-size: 0.373333rem;color: #222;}

.channel-title{width: 9.066667rem; margin: 0 auto;text-align: center;height: 1.133333rem;line-height: 1.133333rem;background: #fff;margin-bottom: 0.266667rem;}

.channel-title img{width: 0.333333rem;height: 0.333333rem;}

.channer-ul-box{width: 9.066667rem;margin: 0 auto;overflow: hidden;}

.channel-ul{width: 9.333333rem;margin: 0 auto;overflow: hidden;margin-left: -0.266667rem;margin-bottom: 0.3rem;}

.channel-ul li{ position: relative; width: 2.066667rem;height: 2.066667rem;float: left;margin-left: 0.266667rem;margin-bottom: 0.266667rem;text-align: center; font-size: 0.293333rem;color: #555;line-height: 3rem;-webkit-user-select: none;-moz-user-select: none;background:#fff url(../image/img/feic1-add.png) no-repeat center 0.16rem; background-size: 40%;}

.channel-ul li>div{}

.channel-ul li span{position: absolute;width: 2.066667rem;height: 2.066667rem;background: #eee; z-index: 11;color: #000;background: none;top: 0;left: 0;}

.channel-ul li img{position: absolute;width: 2.066667rem;height: 2.066667rem; z-index: 9;top: 0;left: 0;}

.channel-ul li img.del{z-index: 10;width: 0.333333rem !important;height: 0.333333rem !important; left: 1.7rem !important;display: none;}

.channel-ul li span.del-show{display: block;!important; width: 2.066667rem;height: 2.066667rem;position: absolute;background: url(../image/img/feic1-del.png) no-repeat 1.55rem 0.133333rem; background-size: 19%;z-index: 20;}

.f-right i{line-height: 0.4rem !important;display: inline-block;margin-top: 1.1rem;width: 1.76rem;font-size: 0.266666rem;}

.channer-ul-box .other-channel-ul li span.del-show{display: none;!important;}

.channel-ul li a{display: block;width: 100%;height: 100%;position: absolute;z-index: 1;}

.clickDom{display: none;position: absolute;width: 2.066667rem;height: 2.066667rem;z-index: 9999999;}

/*确定取消按钮*/

.feic1-bootm{position: fixed;display: flex; flex-direction: row; bottom: -3rem; left: 0; width: 100%; height: 1.133333rem; background: #FFFFFF;z-index: 99999999999999999;}

.feic1-bootm span{flex: 1; display: flex; justify-content: center; align-items: center; color: #FFFFFF; font-size: 0.373333rem;}

.feic1-bootm span:nth-child(1){background:#f69123;}

.feic1-bootm span:nth-child(2){background:#ff7800;}