Question

我正在构建一个系统，允许用户将元素从dragzone拖放到dropzone。一旦丢弃，元素就会“回”到它们的原点。此外，用户可以根据需要对丢弃的元素进行排序。

我有第一个问题，我无法克隆我拖动的块，但我可以在它被删除时对其进行排序。现在我修复了克隆问题，如果我尝试对元素进行排序，那么移动的元素来自dragzone，我无法理解为什么。

这是HTML：

<div class="container-fluid">
    <div class="row">
        <div class="card col-3">
            <div class="card-body">
                <div class="card draggable-element" data-target="textarea">
                    <div class="card-body">
                        This is some text within a card body. 1
                    </div>
                </div>
                <div class="card draggable-element" data-target="textfield">
                    <div class="card-body">
                        This is some text within a card body. 2
                    </div>
                </div>
                <div class="card draggable-element" data-target="fileinput">
                    <div class="card-body">
                        This is some text within a card body. 3
                    </div>
                </div>
            </div>
        </div>

        <div class="card col-6 offset-1">
            <div class="card-body dropzone">

            </div>
        </div>
    </div>



</div><!-- /.container -->

这是JS：

$(document).ready(function() {
    $('.draggable-element').draggable({
        revert: 'invalid',
        appendTo: '.dropzone',
        helper: 'clone'
    });

    $('.dropzone').droppable({
        drop: function (event, ui) {
            // With the following code, the elements won't get cloned
            var item = $(ui.draggable);
            if(!item.hasClass('copy')) {
                item.clone().addClass('copy');
                item.draggable({
                    revert: 'invalid',
                    stack: ".draggable",
                    helper: 'clone'
                })
            }
            else {
                $(this).append($(ui.helper).clone());
            }
            $(this).append(item);
        }
    })
    .sortable();

});

/*
        drop: function (event, ui) {
            // With the following code, the elements getting sorted are 
            // the div.draggable-element from the div.card.col-3
            $(ui.draggable).clone(true).detach().css({
                position: 'relative',
                top: 'auto',
                left: 'auto'
            }).appendTo(this);
        }
 */

我有一段时间没有使用过jquery-ui所以我找不到可能很明显的东西，我试着将代码混合在一起，但它根本没有结束。

提前谢谢

Answer 1

好吧，这可能不是一个完整的答案（但是标记有一个奇怪的＆＃34;卡体＆＃34;持卡人因此我重命名为测试。不会＆＃34;克隆＆＃34; as在问题中有代表...所以它在我的例子中排序但不确定这完全重现/解决了。我更新了＆＃34;克隆＆＃34;部分但不确定它是你想要的。

＆＃13;

$(document).ready(function() {
  $('.draggable-element').draggable({
    revert: 'invalid',
    appendTo: '.dropzone',
    helper: 'clone'
  });

  $('.dropzone').droppable({
      drop: function(event, ui) {
        // With the following code, the elements won't get cloned
        var item = $(ui.draggable);
        // hide to not obscure console.log(item.length);
        if (!item.hasClass('copy')) {
          var newy = item.clone(false);
          newy.addClass('copy');
          //console.log(newy);
          newy.draggable({
            revert: 'invalid',
            stack: ".draggable",
            helper: 'clone'
          });
        } else {
          $(this).append(item);
        }
          $('.dropzone').append(newy);
       // $(this).append(item);
      }
    })
    .sortable();

});

＆＃13;

.cards,
.dropzone {
  border: solid red 1px;
  height: 5em;
}

＆＃13;

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="card col-3">
      <div class="cards">
        <div class="card draggable-element" data-target="textarea">
          <div class="card-body">
            This is some text within a card body. 1
          </div>
        </div>
        <div class="card draggable-element" data-target="textfield">
          <div class="card-body">
            This is some text within a card body. 2
          </div>
        </div>
        <div class="card draggable-element" data-target="fileinput">
          <div class="card-body">
            This is some text within a card body. 3
          </div>
        </div>
      </div>
    </div>
    <div class="card col-6 offset-1">
      <div class="card-body dropzone">
      </div>
    </div>
  </div>
</div>

＆＃13;

jQuery-ui在删除元素后使用sortable的奇怪行为

1 个答案: