Question

我在对话框中遇到可拖动/可放置元素的问题。对于这个例子，我只结合了两个jquery示例。一个用于对话，一个用于droppable。

拖放工作，但您无法看到要拖动的元素。它会在您放下它时显示，但拖动它时不可见。对于我正在做的事情，我需要能够看到我在拖动时拖动的元素。

我创建了一个jsfiddle来向您展示它当前是如何工作的。 http://jsfiddle.net/v2uuF/

<div id="dialog" title="Basic dialog">
  <div id="products">
    <h1 class="ui-widget-header">Products</h1>
    <div id="catalog">
      <h2><a href="#">T-Shirts</a></h2>
      <div>
        <ul>
          <li>Lolcat Shirt</li>
          <li>Cheezeburger Shirt</li>
          <li>Buckit Shirt</li>
        </ul>
      </div>

      <h2><a href="#">Gadgets</a></h2>
      <div>
        <ul>
          <li>iPhone</li>
          <li>iPod</li>
          <li>iPad</li>
        </ul>
      </div>
    </div>
  </div>

  <div id="cart">
    <h1 class="ui-widget-header">Shopping Cart</h1>
    <div class="ui-widget-content">
      <ol>
        <li class="placeholder">Add your items here</li>
      </ol>
    </div>
  </div>
</div>

<button id="opener">Open Dialog</button>

$(function() {
  $( "#draggable" ).draggable();
  $( "#dialog" ).dialog({
    autoOpen: false,    
  });

  $( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
  });

  $( "#catalog li" ).draggable({
    appendTo: "body",
    helper: "clone"
  });
  $( "#cart ol" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
      $( this ).find( ".placeholder" ).remove();
      $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
    }
  }).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
      // gets added unintentionally by droppable interacting with sortable
      // using connectWithSortable fixes this, but doesn't allow you to customize   active/hoverClass options
      $( this ).removeClass( "ui-state-default" );
    }
  });    
});

对话框打开后，我希望它的工作方式与jquery示例中的相同：http://jqueryui.com/droppable/#shopping-cart

有没有人有任何想法？

谢谢。

Answer 1

我只是删除appendTo: "body"就取得了成功。帮助器<li>被附加在绝对定位的对话框之外，因此出现在它后面（z-index）。请将其附加到<ul>。

$("#catalog li").draggable({
    helper: "clone"
});

以下示例：

$(function() {
  
  $("#draggable").draggable();
  
  $("#dialog").dialog({
    autoOpen: false,
  });

  $("#opener").click(function() {
    $("#dialog").dialog("open");
  });

  /*$( "#catalog" ).accordion();*/
  $("#catalog li").draggable({
    helper: "clone"
  });
  
  $("#cart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) {
      $(this).find(".placeholder").remove();
      $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }
  }).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
      // gets added unintentionally by droppable interacting with sortable
      // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
      $(this).removeClass("ui-state-default");
    }
  });
  
});

h1 {
  padding: .2em;
  margin: 0;
}
#products {
  float: left;
  width: 500px;
  margin-right: 2em;
}
#cart {
  width: 200px;
  float: left;
  margin-top: 1em;
}
#cart ol {
  margin: 0;
  padding: 1em 0 1em 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<div id="dialog" title="Basic dialog">
  <div id="products">
    <h1 class="ui-widget-header">Products</h1>
    <div id="catalog">
      <h2><a href="#">T-Shirts</a></h2>
      <div>
        <ul>
          <li>Lolcat Shirt</li>
          <li>Cheezeburger Shirt</li>
          <li>Buckit Shirt</li>
        </ul>
      </div>
      <h2><a href="#">Gadgets</a></h2>
      <div>
        <ul>
          <li>iPhone</li>
          <li>iPod</li>
          <li>iPad</li>
        </ul>
      </div>
    </div>
  </div>
  <div id="cart">
    <h1 class="ui-widget-header">Shopping Cart</h1>
    <div class="ui-widget-content">
      <ol>
        <li class="placeholder">Add your items here</li>
      </ol>
    </div>
  </div>
</div>
<button id="opener">Open Dialog</button>

View on JSFiddle

Answer 2

这是一个z索引问题。您可以为您的助手提供自定义类：

$( "#catalog li" ).draggable({
    appendTo: "body",
    helper: "clone",
    start: function(e, ui)
    {
        $(ui.helper).addClass("ui-draggable-helper");
    }
});

然后给它一个大于ui对话框的z-index：

.ui-draggable-helper { 
    z-index: 5000
}

Fiddle

Answer 3

删除“appendTo：”body“，”。它在jsfiddle上正常工作

jquery在对话框中可拖动的问题

3 个答案: