在JQuery UI Accordion Sortable中使用touchpunch不能與touch一起正常使用

Question

我剛剛使用JQuery UI創建了可排序的手風琴，並使用touchpunch使觸摸設備能夠對部分進行排序。 拖放工作正常，但我注意到“觸摸擴展”並不總是有效，我必須觸摸幾次以使該部分擴展。

有人知道解決辦法嗎？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <div id="accordion">
      <div class="group">
        <h3>Section 1</h3>
        <div>
          <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
        </div>
      </div>
      <div class="group">
        <h3>Section 2</h3>
        <div>
          <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
        </div>
      </div>
      <div class="group">
        <h3>Section 3</h3>
        <div>
          <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
          <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
          </ul>
        </div>
      </div>
      <div class="group">
        <h3>Section 4</h3>
        <div>
          <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
        </div>
      </div>
    </div>


    <script>

    $(function() {
        $( "#accordion" )
          .accordion({
            header: "> div > h3"
          })
          .sortable({
            axis: "y",
            handle: "h3",
            stop: function( event, ui ) {
              // IE doesn't register the blur when sorting
              // so trigger focusout handlers to remove .ui-state-focus
              ui.item.children( "h3" ).triggerHandler( "focusout" );

              // Refresh accordion to handle new order
              $( this ).accordion( "refresh" );
            }
          });
      });
    </script>

這是jsfiddle

Answer 1

是的，問題在於可排序控件是在鼠標按下或單擊等事件時觸發的，而touchpunch則覆蓋了默認操作。 在不經過代碼的情況下，我做了一些“修改”，將排序句柄與h3元素分開。

步驟1：設置一些樣式，以便圖標位於正確的位置

.dragme {
    float:right;
    margin-top:10px;
}

步驟2：將圖標放入並使其漂亮

<h3>Section 3<span class='dragme  ui-accordion-icons ui-icon ui-icon-triangle-2-n-s'></h3>

第3步：更改可排序的句柄，以使外觀漂亮的圖標移動內容

 .sortable({
            axis: "y",
            handle: ".dragme"});