Question

我已经阅读了示例和不同的解决方案，但我仍然坚持使用我的代码。目标是使其工作，以便人们可以将元素（小提琴中的绿色）拖动到目标区域，其中将其他元素添加到目标区域（pdiv）并且拖动的元素恢复到其位置以再次使用。拖动元素也可以在想要的位置拖动时进行排序。

现在我可以拖放元素并将它们排序到位。如何在拖动新元素时启用可排序？此外，列表必须始终可排序，哪种类型有效但现在它在排序时也运行附加代码。

任何帮助或建议将不胜感激。谢谢！

HTML

<div id="pdiv"></div>
<div id="htmldivi">
<div class="element" value="text">For text</div>
<div class="element" value="img">For Image</div>
<div class="element" value="2 img">For 2 Image</div>
</div>

CSS

.element {
    width:200px;
    height:20px;
    background-color:#0C3;
    cursor:pointer;
    margin-top:4px;
}

#pdiv {
    width:500px;
    min-height:100px;
    top:110px;
    border:2px solid;
    }   

.vali {
    height: 15px;
    background-color:#ffe58f;
    border:2px dotted #0C0;
    line-height: 1.2em;
    width:99%;
    margin-left:2px;
}

.fortest {
    background-color:#eae1c3;

}

脚本

$(function() {
    $( ".element" ).draggable({ connectWith: "#pdiv",revert: true, helper: "clone" });
    $( "#pdiv" ).droppable({
      drop: function( event, ui ) {
          var type = ui.draggable.attr("value");
        $.ajax({
            success : function (data) {
                var valuessi = (ui.draggable.attr("value"));
                $("#pdiv").append('<div class="fortest">' + valuessi + '</div>');
            }
        });
      }
    });
  });


$(function() {  
  $( "#pdiv" ).sortable({
      placeholder: "vali"
    });
    $( "#pdiv" ).disableSelection();
  });

这里是小提琴。 Jquery draggable, droppable and sortable

JqueryUI可排序，可拖动和可放置，在拖动新元素时不排序

0 个答案: