jQuery＆amp; JEasyUI动态可放置元素

时间：2015-07-13 13:08:07

标签： javascript jquery jeasyui

我有一个jQuery＆amp;的问题jEasyUI一起工作。在我的代码中，我有一个按钮，当它被点击时，它会向col-sm-3 div添加一个新的row。当我开始拖动到droppable时没有任何事情发生，虽然我想看到一个警报。我玩了一遍，并通过在新添加的列上调用.droppable（）来使其工作。事情开始变得奇怪了。可拖动人员开始从名单中的位置消失。很明显，jQuery和JEasyUI的表现不佳。 JEasyUI拥有自己的拖拽和放大器。 droppable函数，但没有任何关于它们如何应用于动态加载的DOM元素的文章。

enter image description here

动态添加代码：

这是我动态添加到行

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

静态：

附加新元素的元素是<div class="row" id="sortable"> 

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

我的项目有很多依赖项，我认为你可能无法运行这些代码段，但是如果你想加倍努力并帮助我解决这个问题，那么请下载以下依赖项：

0 个答案:

没有答案
相关问题
最新问题