Wie öffne ich mehrere jquery ui draggables?

Ich bin ein Anfänger in jQuery und habe ein Problem mit dem ziehbaren Widget. Es scheint, dass der Selektor die nächste ziehbare Klasse nicht bekommen kann, wenn der "Knopf" angeklickt wird. Die Sache ist, dass ich IDs für den Selektor nicht verwenden kann, weil die Tabelle dynamisch gefüllt ist und die Anzahl der Zeilen variiert. Gibt es eine Möglichkeit, dass ich dies nur durch das Ändern des Javascript lösen kann? Vielen Dank für Ihre Mühe!Wie öffne ich mehrere jquery ui draggables?

CodePen hier: https://codepen.io/Zerberuus/pen/aWENje

HTML:

<!doctype html> 
 
    <html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>jQuery UI Draggable - Default functionality</title> 
 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    </head> 
 
    <body> 
 
    <table> <THEAD> 
 
     <TR> 
 
     <TH>col1</TH> 
 
     <TH>col2</TH> 
 
     <TH>col3</TH> 
 
     <TH>col4</TH> 
 
     <TH>col5</TH> 
 
    \t </TR></THEAD> 
 
     <TBODY><TBODY><TR> 
 
     <TD>random</TD> 
 
    \t <TD>random2</TD> 
 
    \t <TD class="press" style="color:blue;">clickhere</TD> 
 
    
 
     <div class="draggable"> 
 
      <p>Drag me around</p> 
 
      <p>Box 1</p> 
 
     </div> 
 
    
 
    \t <TD class="press" style="color:red;">clickhere2</TD> 
 
    
 
     <div class="draggable"> 
 
      <p>Drag me around</p> 
 
      <p>Box 2</p> 
 
     </div> 
 
     
 
    \t <TD>random3</TD> 
 
    </TR></TBODY></table> 
 
     
 
    </body> 
 
    </html>

JS:

$(document).ready(function(){ 

$(".draggable").draggable(); //init draggable 

$(".draggable").hide(); //hide at first 

$(".press").click(function() { // fadeIn the next .draggable class 
     $(this).next(".draggable:first").fadeIn("slow"); 
}); 

}); //end of script

CSS:

.draggable{ 
    position:relative; 
    width: auto; 
    height: auto; 
    padding: 0.5em; 
    line-height: 0px; 
    border-radius:25px; 
    border:1px solid #000000;; 
    display: inline-block; 
    background-color: #c1c1c1; 
}

Quelle

2017-05-08 Rei.M

@Nemus Bitte fügen Sie kein Snippet nur zum "Formatieren" des HTML ein. Wenn Sie nicht auch das JavaScript und CSS für die ordnungsgemäße Ausführung verwenden, ist das Snippet nutzlos. Snippets sollen lauffähige, in sich geschlossene Möglichkeiten sein, Code-Verhalten zu demonstrieren. –

kann mir jemand mit meinem Problem helfen oder hat eine Alternative zu ziehbaren Sachen? –

Sie haben 'div' Tags zwischen' td's gemischt. Da das illegal ist (ein 'div' kann kein Kind von' tr' sein), werden die 'div's außerhalb der' table' verschoben. Es gibt kein '.next ('. Draggable')', da alle ziehbaren Elemente weggezogen sind. Sie könnten die '.draggable' Objekte zu' td's machen, aber Sie müssen sich mit der Positionierung beschäftigen. –

Wie von Paul Roub erwähnt, gibt es HTML-Syntax-Probleme. Diese sollten zuerst angesprochen werden.

HTML

<table> 
    <thead> 
    <tr> 
     <th>col1</th> 
     <TH>col2</TH> 
     <TH>col3</TH> 
     <TH>col4</TH> 
     <TH>col5</TH> 
    </tr> 
    </thead> 
    <tbody> 
    <TR> 
     <TD>random</TD> 
     <TD>random2</TD> 
     <TD class="press" style="color:blue;" data-target="0">clickhere</TD> 
     <TD class="press" style="color:red;" data-target="1">clickhere2</TD> 
     <TD>random3</TD> 
    </TR> 
    </tbody> 
</table> 
<div class="draggable"> 
    <div class="textdiv"> 
    <span id="titletext">Title Text</span> 
    </div> 
    <div class="titlediv"> 
    <div class="icondiv fa-users" title="user"> 
    </div> 
    <div class="icondiv fa-list" title="entries"> 
    </div> 
    <div class="icondiv fa-cogs" title="OSCM config"> 
    </div> 
    <div class="icondiv fa-sign-out" title="promotable workspace"> 
    </div> 
    <div class="icondiv fa-database" title="ODT"> 
    </div> 
    </div> 
    <div class="contentdiv"> 
    </div> 
</div> 
<div class="draggable"> 
    <p>Drag me around</p> 
    <p>Box 2</p> 
</div>

Sie haben div Elemente als Kinder des tr. Ich zog sie aus dem Tisch. Sie hatten auch zwei tbody Elemente und nur eine Schließung und nur eine benötigt. Ich habe das unnötige Element entfernt.

Keine großen Änderungen an CSS. eine gerade:

CSS

.draggable { 
    position: absolute; 
    width: auto; 
    height: auto; 
    padding: 0.5em; 
    line-height: 0px; 
    border-radius: 15px; 
    border: 1px solid #000000; 
    display: inline-block; 
    background-color: #c1c1c1; 
}

Anschließend können Sie die Vorteile von jQuery und jQuery UI Kette nehmen und Ihren Code zu verbessern.

JavaScript

$(document).ready(function() { 
    $(".draggable").draggable().hide(); //init draggable 
    $(".press").click(function(e) { // fadeIn the next .draggable class 
    console.log("Click Event, Target: ", $(e.target)); 
    var target = $(".draggable").eq($(this).data("target")); 
    target.position({ 
     my: "center top", 
     at: "center bottom+2", 
     of: this 
    }).fadeIn("slow"); 
    }); 
    $(".icondiv").click(
    function() { 
     $(this).next(".iconpop:first").show(); 
    }); 
});

Da es eine spezifische .draggable der Auswahl keine gute Methode ist, werden Sie wahrscheinlich haben, um den HTML-Code in irgendeiner Weise anzupassen, sich zu helfen. Sie könnten auch .index() mit ein wenig Arbeit verwenden.

Da jeder td ist ein Kind von tr, .index() wird Ihnen sagen, den Index dieses Elements in der Zeile und Sie können das verwenden, um ein bestimmtes Element wählen .eq() verwenden. Wenn Spalte 3 und 4 immer die anklickbaren Elemente sind, könnten Sie damit arbeiten.Betrachten Sie das folgende:

HTML

<TR> 
    <TD>random 1</TD> 
    <TD>random 2</TD> 
    <TD class="press" style="color:blue;">click here 1</TD> 
    <TD class="press" style="color:red;">click here 2</TD> 
    <TD>random 3</TD> 
</TR>

jQuery

$(".press").click(function(e) { 
    $(".draggable").eq($(this).index() - 2).position({ 
    my: "center top", 
    at: "center bottom+2", 
    of: this 
    }).fadeIn("slow"); 
});

Dabei $(this).index() kehrt entweder 2 oder 3, und wenn wir 2 subtrahieren, können wir jetzt nennen Index 0 oder 1 jeweils.

Jetzt ist es nicht klar, ob Sie 1 div, dass alle Zeilen verwenden, oder eine eindeutige div für jede Zeile haben.

Ich hoffe, das hilft.

Quelle

2017-05-09 18:03:34 Twisty

finden. Vielen Dank! –

Wie öffne ich mehrere jquery ui draggables?

Antwort

Verwandte Themen