Art Kombination aus
und
mit Jquery

https://stackoverflow.com/questions/851123

21-08-2019
|

Frage

Ich bin neu in Jquery. Ich mag sortableUI meine Datalist verwenden. Jede Zeile in Datenliste enthält Text mit der Seriennummer. Ich habe sortierbar ui erfolgreich eingesetzt. Aber jetzt Ich möchte den Text nicht die Seriennummer bewegen, während das Sortieren. Hier ist mein Beispielcode. Die div zeigt die Seriennummer an der obere linke Ecke jedes li. Jetzt Wenn ich versuche strat zum Ziehen Beispiel 2. Li mit 3 li dann dritten Punkt geht an 2. Position als Regel aber Problem ist, dass es nach dem zweiten Punkt des div geht (wo es sein sollte dauern, bis wie erste Last div). Als Ergebnis nach divs Stil .. Seriennummer 1 und 2 überlappen an Position 1. Elements.

Gibt es eine Möglichkeit, die div nutzen könnte, um nur zu halten, nachdem es li entspricht, während Sortierung?

<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>

Bild Vor dem Sortieren:

Bild kann nicht sehen

Wenn ich nun eine leichte Bewegung setzen, kann u den div enthält Seriennummer siehe zeigt noch am richtigen Ort

Bild kann nicht sehen

Nach dem zweiten Punkt bis 3. Sortierung

<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>

Bild nach dem Sortieren:

Bild kann nicht sehen

Der Stil von Li und Div hier auf Stil:

.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; 
}

Lösung

Ich dachte, einer alternativen Lösung, die ein wenig mehr elegant ist: 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>

Andere Tipps

Ich hatte den HTML und CSS zu ändern, aber ich denke, das ist die Wirkung erreicht man nach war.

Hier ist eine gehostete Demo: http://jsbin.com/erigu (Editierbare über 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>

Einfachstes Sache könnte die li / div Paare innerhalb eines anderen Elements zu setzen sein, und Art auf dieser Grundlage.

So etwas sollte funktionieren, obwohl es viele Möglichkeiten, wie Sie es tun wollen. Die sortierbar Funktion ist nicht erforderlich, dass Sie li Elemente verwenden.

<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>

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow

Art Kombination aus und mit Jquery

Nach dem zweiten Punkt bis 3. Sortierung

Bild kann nicht sehen

Art Kombination aus
und
mit Jquery