點擊增加/移除標簽,實現增加便簽拖拽排序

點擊備選字段,在列表顯示字段再有勾選狀態,再點擊同一字段取消狀態并同時在列表移除。鼠標經過顯示刪除,點擊刪除移除字段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script src="jszip/jquery-3.3.1.min.js"></script>
<script src="jszip/jquery-ui.min.js"></script>
<div class="lxr-pzRight">
                    <div class="lxr-tit">拖拽調整列顯示順序</div>
                    <!--拖拽列表-->
                    <ul class="tz-list clearfix" id="tz_list">
                        <li>負責人</li>
                        <li>姓名</li>
                        <li>性別</li>
                        <li>手機</li>
                        <li>機構名稱</li>
                        <li>單位職務</li>
                        <li>負責人</li>
                    </ul>
                    <div class="lxr-tit">備選字段
                        <a href="javascript:;" class="lxr-add" id="zdy_kz">自定義擴展字段</a>
                    </div>
                    <!--備選列表-->
                    <ul class="bx-list clearfix">
                        <li>
                            <span data-mark="1">
                                姓名
                                <i></i>
                            </span>
                        </li>
                        <li>
                            <span data-mark="2">
                                郵箱
                                <i></i>
                            </span>
                        </li>
                        <li>
                            <span data-mark="3">
                                地址地址地址地址
                                <i></i>
                            </span>
                        </li>
                    </ul>
                    <button type="button">保 存</button>
                </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 瀏覽器阻止事件冒泡事件
  function preventBubble(event){
      var e=arguments.callee.caller.arguments[0]||event; //若省略此句,下面的e改為event,IE運行可以,但是其他瀏覽器就不兼容
      if (e && e.stopPropagation) {
          e.stopPropagation();
      } else if (window.event) {
          window.event.cancelBubble = true;
      }
  }
//備選字段選擇
  $(".bx-list").on('click','span',function () {
      var mark = $(this).data("mark");
      if($(this).hasClass("on")){
          $(this).removeClass("on");
          $(".tz-list li").each(function () {
              if($(this).data("mark") == mark) {
                  $(this).remove();
              }
          })
      }

      else {
          var html = $(this).html();
          $(this).addClass("on");
          $(".tz-list").append("<li data-mark= "+ mark +">" + html + " </li>").find("i").remove();
      }
  });

  $(".bx-list").on('click','i',function () {
    var mark = $(this).parents("span").data("mark");
    $(this).parents("li").remove();
    $(".tz-list li").each(function () {
      if($(this).data("mark") == mark) {
        $(this).remove();
      }
    });
    preventBubble();

  });

// 拖動排序
  $( "#tz_list" ).sortable().disableSelection();

轉載請標明出處:小網站 » 點擊增加/移除標簽,實現增加便簽拖拽排序

贊 (0)

評論 0

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址

如果覺得文章有用就支持一下~

支付寶掃一掃打賞

微信掃一掃打賞

什么是期货平台 一波中特 新彩票走势网首121 山西快乐十分开奖报多少 河北快3走势图基本 吉林快三快三开奖结果 陕西快乐十分电子版走势图 老北京时时开奖 老时时图五星 香香正版挂牌2019年全年资料 香港王中王宝典资料跑马