2016-07-21 6 views
0

Я попытался получить следующие демо работает, используя разборную набор вместо ListView и я не могу сделать так:JQuery Mobile, как включить разборный набор перетащить

http://forresst.github.io/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/

После разборный набор становится сортируемым, функция развала прерывается.

Я использую:

JQuery Mobile 1.4.5

JQuery 1.11.0

JQuery-UI 1.11.4

Кордова 6.3.0

И я m для тестирования на Android (SGS4)

HTML:

<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script> 
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script> 
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.touch-punch.min.js"></script> 

<div data-role="page" id="test"> 

    <div role="main" class="ui-content"> 

     <div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable"> 
      <div data-role="collapsible"> 
       <h3>Section 1</h3> 
      <p>I'm the collapsible content for section 1</p> 
      </div> 
      <div data-role="collapsible"> 
       <h3>Section 2</h3> 
      <p>I'm the collapsible content for section 2</p> 
      </div> 
      <div data-role="collapsible"> 
       <h3>Section 3</h3> 
      <p>I'm the collapsible content for section 3</p> 
      </div> 
     </div> 

    </div><!-- /content --> 

</div><!-- /test page --> 

JavaScript:

 $(document).on("pageshow","#test",function(){ 

      $(".sortable").sortable(); 
      $(".sortable").disableSelection(); 
      /// Refresh list to the end of sort to have a correct display 
      $(".sortable").bind("sortstop", function(event, ui) { 
       $('.sortable').collapsibleset('refresh'); 
//    $('.sortable').listview('refresh'); 
      }); 
     }); 

ответ

0

pageshow событие не стрельбы. Пройдите следующий код, он работает отлично.

HTML код:

<html> 
    <head> 
     <title>Drag and Drop</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> 
    </head> 

    <body> 
     <div data-role="page" id="test"> 

    <div role="main" class="ui-content"> 

     <div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable"> 
      <div data-role="collapsible"> 
       <h3>Section 1</h3> 
      <p>I'm the collapsible content for section 1</p> 
      </div> 
      <div data-role="collapsible"> 
       <h3>Section 2</h3> 
      <p>I'm the collapsible content for section 2</p> 
      </div> 
      <div data-role="collapsible"> 
       <h3>Section 3</h3> 
      <p>I'm the collapsible content for section 3</p> 
      </div> 
     </div> 

    </div><!-- /content --> 
</div><!-- /test page --> 
    </body> 
</html> 

код расслоение плотной:

$(document).ready(function(){ 

      $(".sortable").sortable(); 
      $(".sortable").disableSelection(); 
      /// Refresh list to the end of sort to have a correct display 
      $(".sortable").bind("sortstop", function(event, ui) { 
       $('.sortable').collapsibleset('refresh'); 
//    $('.sortable').listview('refresh'); 
      }); 
     }); 
+0

Благодарим вас за ответ Naresh, но это все еще не работает. Как только я импортирую скрипт touch-punch, сбрасываемые div больше не будут разваливаться и расширяться. Мне понравилось. Это проект кордовы, может быть, это влияет на него? – ModusPwnens

+0

Я не проверял его в кордове, я проверил в браузере, и он отлично работает @ModusPwnens –

+0

Вот почему страницы не работали для вас. Спасибо за вашу попытку. – ModusPwnens

0

Я надеюсь, что это поможет кто-то еще. Я не смог получить сборный набор для правильной работы с функцией перетаскивания в кордове, поэтому я придумал другой метод. Я просто разместил кнопки на сворачиваемом заголовке, чтобы они могли перемещаться вверх или вниз. Вот код:

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href="css/app.css" rel="stylesheet" > 
    <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" /> 
    <link href="lib/jquery-ui/jquery-ui.structure.min.css" rel="stylesheet" /> 
    <link href="lib/jquery-ui/jquery-ui.theme.min.css" rel="stylesheet" /> 
    <link href="lib/jqm/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" /> 
    <link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> 

    <script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script> 
    <script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="lib/jsignature/jSignature.min.js"></script> 

</head> 

<body> 
<div data-role="page" id="test"> 

    <div role="main" class="ui-content"> 

     <div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable ui-collapsible-set ui-group-theme-a ui-corner-all" data-enhanced="true"> 

      <div data-role="collapsible" id="collapsible-1" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true"> 
       <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> 
        <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 1<span class="ui-collapsible-heading-status"> click to expand contents</span> 
        </a> 
        <span class="span-move-up"> 
         <a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u"> 
          <span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span> 
         </a> 
        </span> 
        <span class="span-move-down"> 
         <a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d"> 
          <span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span> 
         </a> 
        </span> 
       </h3> 
       <div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true"> 
        <p>I'm the collapsible content for section 1</p> 
       </div> 
      </div> 

      <div data-role="collapsible" id="collapsible-2" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true"> 
       <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> 
        <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 2<span class="ui-collapsible-heading-status"> click to expand contents</span> 
        </a> 
        <span class="span-move-up"> 
         <a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u"> 
          <span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span> 
         </a> 
        </span> 
        <span class="span-move-down"> 
         <a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d"> 
          <span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span> 
         </a> 
        </span> 
       </h3> 
       <div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true"> 
        <p>I'm the collapsible content for section 2</p> 
       </div> 
      </div> 

      <div data-role="collapsible" id="collapsible-3" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true"> 
       <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> 
        <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 3<span class="ui-collapsible-heading-status"> click to expand contents</span> 
        </a> 
        <span class="span-move-up"> 
         <a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u"> 
          <span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span> 
         </a> 
        </span> 
        <span class="span-move-down"> 
         <a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d"> 
          <span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span> 
         </a> 
        </span> 
       </h3> 
       <div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true"> 
        <p>I'm the collapsible content for section 3</p> 
       </div> 
      </div> 

      <div data-role="collapsible" id="collapsible-4" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true"> 
       <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> 
        <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 4<span class="ui-collapsible-heading-status"> click to expand contents</span> 
        </a> 
        <span class="span-move-up"> 
         <a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u"> 
          <span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span> 
         </a> 
        </span> 
        <span class="span-move-down"> 
         <a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d"> 
          <span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span> 
         </a> 
        </span> 
       </h3> 
       <div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true"> 
        <p>I'm the collapsible content for section 4</p> 
       </div> 
      </div> 

     </div> 

    </div><!-- /content --> 

</div><!-- /test page --> 
</body> 

CSS:

.circular-btn { 
    width: 40px !important; 
    height: 40px !important; 
    border-radius: 50% !important; 
    padding: 0px !important; 
    margin: 0px !important; 
} 

.circular-btn span span { 
    height: 100px !important; 
    line-height: 70px; 
} 

.span-move-up { 
    position: relative; 
    z-index: 10; 
    float: right; 
    top: -22px; 
    left: -40px; 
} 

JavaScript:

$('.move-collapsible-up').on('tap',function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 

    var currCollapseElem = $(this).parent().parent().parent(); 
    var prevCollapseElem = currCollapseElem.prev('div'); 

    /// detach and attach the add button 
    currCollapseElem.insertBefore(prevCollapseElem); 

    $('.sortable').collapsibleset('refresh'); 
}); 

$('.move-collapsible-down').on('tap',function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 

    var currCollapseElem = $(this).parent().parent().parent(); 
    var nextCollapseElem = currCollapseElem.next('div'); 

    /// detach and attach the add button 
    currCollapseElem.insertAfter(nextCollapseElem); 

    $('.sortable').collapsibleset('refresh'); 
}); 

Опять же, я надеюсь, что это поможет кому-то. Если у меня есть какие-либо проблемы в моем коде, пожалуйста, не стесняйтесь комментировать.

Смежные вопросы