مزيج نوع من <لى> و
باستخدام مسج

StackOverflow https://stackoverflow.com/questions/851123

سؤال

وأنا جديدة في مسج. أريد استخدام sortableUI إلى بلدي Datalist على. كل صف في Datalist على يحتوي على نص مع الرقم التسلسلي. ولقد استخدمت واجهة المستخدم للفرز بنجاح. لكن الآن أريد نقل النص ليس الرقم التسلسلي في حين الفرز. هنا هو بلدي مثال التعليمة البرمجية. يعرض شعبة الرقم التسلسلي في زاوية كل لى أعلى اليسار. الآن إذا حاولت STRAT سحب ل المثال 2 لى لى مع 3RD ثم البند 3RD يذهب إلى موقف 2ND كما حكم ولكن المشكلة هي أن يذهب بعد شعبة البند 2ND ل(حيث ينبغي يكون قبل DIV مثل الحمل الأول). ونتيجة لذلك، وفقا لشعبة ل أسلوب .. لا التسلسلي 1 و 2 التداخل في موقف 1st مادة ل.

هل هناك أي طريقة يمكن أن تستخدم للحفاظ على شعبة بعد انها لى المقابلة في حين الفرز؟ 

<ul id="ulSortable" class="ui-sortable" >
        <li class="Decide_Rank_Item_Li">test A</li>
        <div class="DisplayOrder">1</div>

        <li class="Decide_Rank_Item_Li">Test B</li>
        <div class="DisplayOrder">2</div>

        <li class="Decide_Rank_Item_Li">Test C</li>
        <div class="DisplayOrder">3</div>

        <li class="Decide_Rank_Item_Li">Test D</li>
        <div class="DisplayOrder">4</div>
</ul>

صورة قبل الفرز:

لا يمكن رؤية صورة

والآن إذا كنت بدء التحرك طفيف، يمكن أن نرى ش div الذي يحتوي المسلسل لا يزال يظهر في المكان المناسب

لا يمكن رؤية صورة

بعد فرز البند 2ND إلى 3 

<ul id="ulSortable" class="ui-sortable" >
        <li class="Decide_Rank_Item_Li">test A</li>
        <div class="DisplayOrder">1</div>
       <div class="DisplayOrder">2</div>

        <li class="Decide_Rank_Item_Li">Test C</li>

        <li class="Decide_Rank_Item_Li">Test B</li>
        <div class="DisplayOrder">3</div>

        <li class="Decide_Rank_Item_Li">Test D</li>
        <div class="DisplayOrder">4</div>
</ul>

صورة بعد الفرز:

لا يمكن رؤية صورة

وتظهر اسلوب لي والدرجة هنا نمط: 

.Decide_Rank_Item_Li
{
        position: relative;
       display: block;
        border-color: #C0C0C0;
        border-width: 1px;
        border-style: solid;
        vertical-align:  bottom;
        width: 110px;
        height: 100px;
        float:left;
        background-color: #F8F8F8;

}

.DisplayOrder
{
        position: relative;
        display: block;
        float: left;
        top: 5px;
        left: -105px;
        z-index: 100;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        padding: 0px;
        margin: 0px;
        width: 0px;
        clear: right;
        color: #808080; 
}
هل كانت مفيدة؟

المحلول

ومجرد التفكير في حل بديل الذي هو أكثر من ذلك بقليل أنيقة: http://jsbin.com/udina 

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

    <style type="text/css" media="screen">
      body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
      li {
        width: 100px;
        height: 100px;
        float: left;
        background: #F8F8F8;
        border: 1px solid #C0C0C0;
        list-style-position: inside;
        color: #C0C0C0;
      }
      div {
        text-align: center;
        color: #C0C0C0;
        font-size: 120%;
      }
      .placeholder {
        list-style-type:decimal;
      }
    </style>
  </head>
  <body>
    <ol>
      <li><div>Test Content A</div></li>
      <li><div>Test Content B</div></li>
      <li><div>Test Content C</div></li>
      <li><div>Test Content D</div></li>
      <li><div>Test Content E</div></li>
      <li><div>Test Content F</div></li>
      <li><div>Test Content G</div></li>
      <li><div>Test Content H</div></li>
      <li><div>Test Content I</div></li>
      <li><div>Test Content J</div></li>
      <li><div>Test Content K</div></li>
      <li><div>Test Content L</div></li>
      <li><div>Test Content M</div></li>
      <li><div>Test Content N</div></li>
      <li><div>Test Content O</div></li>
      <li><div>Test Content P</div></li>
      <li><div>Test Content Q</div></li>
      <li><div>Test Content R</div></li>
      <li><div>Test Content S</div></li>
      <li><div>Test Content T</div></li>
      <li><div>Test Content U</div></li>
      <li><div>Test Content V</div></li>
      <li><div>Test Content W</div></li>
      <li><div>Test Content X</div></li>
      <li><div>Test Content Y</div></li>
      <li><div>Test Content Z</div></li>
    </ol>
    <script>
      $(function(){
        $('ol').sortable({
          helper: function(evt, el){
            return el.clone().css('color', '#F8F8F8');
          },
          placeholder: 'placeholder'
        });
      });
    </script>
  </body>
</html>

نصائح أخرى

واضطررت الى تغيير HTML و CSS ولكن أعتقد أن هذا يحقق التأثير الذي كان بعد.

وفيما يلي عرض استضافه: http://jsbin.com/erigu (وقابل للتحرير عن طريق <أ href = ل "http://jsbin.com/erigu/edit" يختلط = "نوفولو noreferrer"> http://jsbin.com/erigu/edit ) 

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

    <style type="text/css" media="screen">
      * { margin: 0; padding: 0; }

      #numbers>div, #sortables>div {
        width: 110px;
        height: 100px;
        float: left;
        border: 1px solid #C0C0C0;
      }

      #numbers>div {
        padding-bottom: 20px;
        font: bold 12px Arial, Helvetica, sans-serif;
        color: #808080; 
        background-color: #F8F8F8;
      }

      #sortables>div {
        padding-top: 20px;
        text-align: center;
        color: black;
      }

      #sortables {
        position: absolute;
        left: 0px;
      }
    </style>
  </head>
  <body>
    <div id="numbers">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

    <div id="sortables">
      <div>Test A</div>
      <div>Test B</div>
      <div>Test C</div>
      <div>Test D</div>
    </div> 

    <script>
      $(function(){
        $('#sortables').sortable({
          /*
            The helper option allows you to customize the dragged element.
            in this case we are adding a background.
          */  
          helper: function(evt, el){
            return el.clone().css({background:'#F8F8F8'});
          }
        });
      });
    </script>  
  </body>
</html>

وأبسط شيء يمكن أن يكون لوضع أزواج li / div داخل عنصر آخر، ونوع بناء على ذلك.

وشيء من هذا القبيل يجب أن تعمل، على الرغم من أن هناك الكثير من الخيارات على الطريقة التي تريد أن تفعل ذلك. ميزة للفرز لا تتطلب استخدام عناصر li. 

<ul id="ulSortable" class="ui-sortable" >
    <li class="Decide_Rank_Item_Li">
        <span>test A</span>
        <div class="DisplayOrder">1</div>
    </li>
    <li class="Decide_Rank_Item_Li">
        <span>test B</span>
        <div class="DisplayOrder">2</div>
    </li>
    <li class="Decide_Rank_Item_Li">
        <span>test C</span>
        <div class="DisplayOrder">3</div>
    </li>
    <li class="Decide_Rank_Item_Li">
        <span>test D</span>
        <div class="DisplayOrder">4</div>
    </li>
</ul>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top