Javascript jQuery&；JEasyUI动态可升降元件

我对jQuery和jEasyUI一起工作有意见。在我的代码中，我有一个按钮，当它被单击时，它会将一个新的

col-sm-3

添加到

行

div中。当我开始拖拽到下拉列表中时，不会发生任何事情，尽管我可能会看到一个警报。我在新添加的列上调用了.droppable（），使其正常工作。这就是事情开始变得奇怪的地方。拖拽者开始从他们在列表中的位置消失。很明显，jQuery和JEasyUI的表现并不好。JEasyUI有自己的可拖放函数，但没有任何关于如何将它们应用于动态加载的DOM元素的文章

动态添加的代码： 这是我动态添加到行中的HTML

<div class="col-sm-4" >
        <div class="box options-list">
            <div class="box-header with-border">
                <h3 class="box-title"></h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <div class="box-body">
                <input class="form-control" placeholder="Name">
                <div class="row">
                    <div class="col-xs-6">
                        <div id='validate-checkbox' class="checkbox icheck">
                            <label>
                                <label for="validate-checkbox"></label>
                                <input  class="validate-checkbox" name="is_disabled" type="checkbox"> Validate
                            </label>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div id='conform-value-checkbox' class="checkbox icheck">
                            <label>
                                <label for="conform-value-checkbox"></label>
                                <input  class="validate-checkbox" name="is_disabled" type="checkbox"> Conform
                            </label>
                        </div>
                    </div>
                </div>

                <hr>
                <div class="row">
                    <div class="col-xs-12">
                        <ul class="">

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

验证
符合

静态： 添加新元素的元素是

#可排序{列表样式类型：无；边距：0；填充：0；宽度：100%；}
.col-sm-4.ui可排序占位符{
背景：红色；
}
强制验证
零件编辑器


文本


文本区域


列表


织物


多织物


买方代码


买方供应商


添加部分
放弃更改
保存更改
/*
每次触发时，都会生成一个新元素
添加到可排序列表中。那么元素呢
接受UL列表中的可下拉列表*/
$（“#添加零件btn”）。单击（函数（）{
$.get（“），函数（数据）{
var newElement=$（数据）；
$（“#可排序”）.append（newElement）；
$（新元素）。可拖放({
接受：'.list组项'，
drop：函数（e、ui）
{
警惕（“啊！我的脚！”）；
}
})
});
});
$（函数（）{//DOM就绪
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});
/*如果我将其放入上面的DOM就绪函数中，列表项将被拖动以表现出奇怪的行为
*所以我把它放在这里了*/
$（“.list组项”）.draggable({
回复：对，
附录：'.easyui布局'，
助手：“克隆”，
zIndex:3
}).disableSelection（）；

我的项目有太多依赖项，我认为您可能无法运行这些代码段，但是如果您想在这方面多做一点帮助我，请下载以下依赖项：

• jQuery>=1.11.x
• jQueryUI jEasyUI最新版本
• AdminLTE 2.1.1（引导3主题）

---

ehhh您能显示您的代码吗？你做了什么？问题解决了。请看这里，第一个答案是解决方案基本上包括jEasyUI之后的jQueryUI。

<style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
   .col-sm-4 .ui-sortable-placeholder  {
        background: red;

    }
</style>
<div class="box">
    <div class="box-body">
        <div class="row">
            <div class="col-md-6">
                <?= $this->Form->input('name', ['placeholder' => 'Enter part name']) ?>
            </div>
            <div class="col-lg-6">
                <?= $this->Form->input('description', ['placeholder' => '(Optional)']) ?>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <?= $this->Form->input('item_part_type_id', ['label' => 'Type']) ?>
            </div>
            <div class="col-md-4">
                <label for="has-validation-checkbox"></label>
                <div id='has-validation-checkbox' class="checkbox icheck">
                    <label>
                        <input class="has-validation-checkbox" name="has_validation" type="checkbox"> Force Validation
                    </label>
                </div>
            </div>
    </div>
</div>
</div>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title"><strong>Part Editor</strong></h3>
    </div>
    <div class="box-body">
        <div class="row">
           <div class="col-xs-12">
               <div class="easyui-layout" style="width:100%;height:400px;">
                   <div  data-options="region:'east',split:true" title="Existing Miniparts" style="width:20%;">



                   </div>
                   <div data-options="region:'west',split:true" title="Options" style="width:20%;">
                        <ul class="list-group" id="options-list">
                            <li class=" bg-black-gradient list-group-item">
                                Text<span class="pull-right"><i class="fa fa-cog"></i></span>
                            </li>
                            <li class="bg-black-gradient  list-group-item">
                                Textarea
                            </li>
                            <li class="bg-black-gradient  list-group-item">
                                List
                            </li>
                            <li class="bg-black-gradient list-group-item">
                                Fabric
                            </li>
                            <li class="bg-black-gradient list-group-item">
                                Multi Fabric
                            </li>
                            <li class="bg-black-gradient  list-group-item">
                                Buyin Code
                            </li>
                            <li class="bg-black-gradient  list-group-item">
                                Buyin Supplier
                            </li>
                        </ul>
                   </div>
                   <div  id="here"  data-options="region:'center',title:'Miniparts'" style="width: 60%; padding:5px;" class="bg-black-gradient" >
                    <div class="row" id="sortable">

                   </div>
                   </div>
                   </div>
           </div>
        </div>
    </div>
    <div class="box-footer">
        <button id="add-part-btn" class="btn btn-primary btn-sm pull-right"><i class="fa fa-plus"></i> Add Part</button>
    </div>
</div>

<div class="well clearfix">
    <div class="pull-right">
        <button class="btn btn-default btn-md"><i class="fa fa-times"></i> Discard Changes</button>
        <button class="btn btn-primary btn-md"><i class="fa fa-save"></i> Save Changes</button>
    </div>
</div>
<script>

    /*
     Each time this is triggered a new element is to be
     added to the sortable <div class="row">. The element then
     accepts a droppable from a UL list */
    $('#add-part-btn').click(function() {

        $.get("<?= $this->Url->build(['action' => 'minipart']) ?>", function (data) {
            var newElement = $(data);
            $('#sortable').append(newElement);
            $(newElement).droppable({
                accept: '.list-group-item',
                drop: function(e,ui)
                {
                    alert("AahhH! my foot!");
                }
            })
        });
    });

    $(function(){ // DOM Ready
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();

    });

    /* If I put into the DOM Ready function above,the list item being dragged to behave strangely
    * So I left it out here instead. */
    $( ".list-group-item").draggable({
        revert: true,
        appendTo: '.easyui-layout',
        helper: 'clone',
        zIndex: 3
    }).disableSelection();


</script>