Question

我正在使用jQuery UI排序。一切都工作得很好，除了当我将一个元素拖到另一个元素时，元素不会根据鼠标指针移动。这是指针首先，当指针停止时，元素到达指针位置。我做错了什么或有设置来做这件事吗？

我的代码如下：

jQuery( "#test1" ).sortable({
        start:function(event, ui) {
          $("#test2").css('background-color','#ebf2f9');
          $("#test2").css('border','2px dashed #3b73af');

          $("#test3").css('background-color','#ebf2f9');
          $("#test3").css('border','2px dashed #3b73af');
        },
        over: function(event, ui) {
          var parent_id = ui.item.parent().attr('id');
          if(parent_id != "test1") {
            $("#test1").css('background-color','#f3f9f4');
            $("#test1").css('border','2px dashed #14892c');
          }
        },
        deactivate:function(event, ui) {
          $("#test1").css('background-color','white');
          $("#test1").css('border','none');
        },
        out:function(event, ui) {
          var parent_id = ui.item.parent().attr('id');
          if(parent_id != "test1") {
            $("#test1").css('background-color','#ebf2f9');
            $("#test1").css('border','2px dashed #3b73af');
          }
        },
        stop: function( event, ui ) {
          var accepted = $("#test1").sortable('toArray');
          var pending = $("#test2").sortable('toArray');
          var all = $("#test3").sortable('toArray');
          console.log(ui.item.html());
          sendAjaxRequest(all,accepted,pending);
        },
        receive:function( event, ui ) {
          var item_id = ui.item.attr('id');
          var sender_id = ui.sender.attr('id');
          //Updating Counter
          updateCounters(sender_id,'test1_count_display');
          var html = ui.item.html();
          ui.item.children('.post-icons').html('');
        },
        connectWith: ".sortable-scroll-holder"
      }).disableSelection();
    });

我总共有三个可排序列表，所有列表都相互连接。

这是其中一个元素的HTML：

<ul id="test1" class="connectedSortable1" style="min-height: 900px; float: left; width: 20%; margin: 0 5%; padding: 100px 0 0; list-style: none;">
        <li id="aleem1" style="background-color: #000; color: #fff; padding: 10px; margin: 0 0 10px;">
            <span class="name" style="display: none !important;" data-search-term="additonal additonal">additonal additonal</span>
            <span class="title" style="display: none !important;" data-search-term="Walt Disney World">Walt Disney World</span>
            <span class="company" style="display: none !important;" data-search-term="redsignal greensignal">redsignal greensignal</span>
            <span class="email" style="display: none !important;" data-search-term="kashaf@asdasd.com">kashaf@asdasd.com</span>
            <span class="network_group" style="display: none !important;" data-search-term=""></span>
            <span class="department" style="display: none !important;" data-search-term="ddfdf">ddfdf</span>
            <div class="img">               <img src="http://192.168.1.191:8000/images/speakers/no-img.jpg" alt="" width="38">
            </div>
            <div class="text">
                <h6>additonal attendee</h6>
                <div class="text-cs">
                    <p>                   Walt Disney World at redsignal greensignal
                    </p>
                    <p>Department ddfdf</p>
                </div>
            </div>
            <ul class="post-icons"></ul>
        </li>
</ul>

Answer 1

最有可能的是，每一步拖动都会触发太多代码。查看每步执行的操作并减少或删除它。通常的jquery dom性能方面是合适的，例如缓存元素以避免重复选择等。

JQuery UI可排序元素不按鼠标移动

1 个答案: