Question

我是jquery的初学者，并且在可拖动小部件方面遇到了一些问题。当点击“按钮”时，似乎选择器无法获得下一个可拖动的类。问题是我不能使用ID作为选择器，因为表是动态填充的，行数是变化的。有没有办法解决这个问题只能改变javascript？谢谢大家的努力！

CodePen：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>
    	</TR></THEAD>
      <TBODY><TBODY><TR>
      <TD>random</TD>
    	<TD>random2</TD>
    	<TD class="press" style="color:blue;">clickhere</TD>
    
        <div class="draggable">
          <p>Drag me around</p>
          <p>Box 1</p>
         </div>
    
    	<TD class="press" style="color:red;">clickhere2</TD>
    
        <div class="draggable">
          <p>Drag me around</p>
          <p>Box 2</p>
         </div>
      
    	<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; 
}

Answer 1

如Paul Roub所述，存在HTML语法问题。这些应该首先解决。

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

您有div个元素作为tr的子元素。我把它们从桌子上移开了。您还有两个tbody元素，只有一个关闭，只需要一个。我删除了不必要的元素。

对CSS没有太大的改变。只有一个：

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

然后，您可以利用jQuery和jQuery UI来链接和改进代码。

<强>的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();
    });
});

由于没有好的方法来选择特定的.draggable，您可能需要以某种方式调整HTML以帮助自己。您还可以通过一些工作来使用.index()。

由于每个td都是tr的子项，.index()会告诉您该行中该元素的索引，您可以使用{{1}来选择特定元素}}。如果第3列和第4列始终是可点击元素，则可以使用此功能。请考虑以下事项：

<强> HTML

.eq()

<强>的jQuery

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

在此，$(".press").click(function(e) { $(".draggable").eq($(this).index() - 2).position({ my: "center top", at: "center bottom+2", of: this }).fadeIn("slow"); });将返回$(this).index()或2，当我们减去3时，我们现在可以调用索引2或{{1分别。

现在不清楚是否所有行都使用1 0，或每行使用唯一1。

我希望这会有所帮助。

如何打开多个jquery ui draggables？

1 个答案: