jQuery UI可拖动克隆 [英] jQuery UI Draggable Clone

查看：96
本文介绍了jQuery UI可拖动克隆的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个可拖动到某些盒子上的物品清单。我在列表项中添加了关闭按钮。关闭按钮对原始列表项有效，但对克隆项无效。



  $（。sortable）。sortable（{恢复：true，connectWith： .draggable}）; $（。draggable）。draggable（{connectToSortable： .sortable，helper： clone，恢复：  true，占位符： droppable-placeholder}）; $（。sortable）。draggable（{connectWith： .draggable}）;; $（ ul，li）。disableSelection（）; $（ .close-list-item）。click（function（event）{event.preventDefault（）; console.log（关闭列表项称为）; $（this）.closest（'li'）。remove（）; }）;  

  ul {list-style-type：none ;边距：0;填充：0;底边距：0.7em; float：left;} li {margin：0.5em;填充：0.5em;宽度：200像素；边框：1像素纯黑色；}。可拖动的列{高度：100％；}。可放下的物品{边框：1像素纯黑色；填充：0.5em;向左飘浮; align-content：space-between;}。sortable {width：230px;高度：10em；溢出：自动；边框：1px纯黑色； background-color：lightgrey;}。droppable-placeholder {background-color：yellow;}。row {display：flex; / *等于孩子的身高* /}。col {flex：1; / *另外，等宽* /填充：1em； border：solid;}  

 < script src = https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src = https://cdnjs.cloudflare.com/ajax/ libs / jqueryui / 1.12.1 / jquery-ui.min.js>< / script>< link rel = stylesheet type = text / css href = https://cdnjs.cloudflare.com /ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css />< div class = row> < div class = col-xs-4 draggable-column> < ul class => < li class = draggable> 1将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < li class = draggable> 2将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < li class = draggable> 3将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < li class = draggable> 4将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < li class = draggable> 5将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < / ul> < / div> < div class = col-xs-8 droppable-column> < div class = droppable-item> < h3>项目1< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3 class =文本中心>项目2< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3>项目3< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3>项目4< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3>项目5< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3>项目6< / h3> < ul class = sortable> < / ul> < / div> < / div>< / div>



何时将其拖到一个框中，创建一个克隆，克隆的关闭按钮未按预期关闭。如何使克隆的关闭按钮起作用？

解决方案

自从 li 元素（及其内部的关闭按钮）是动态生成的，您需要使用以下语法将事件绑定到它。您使用的语法不会将事件绑定到动态创建的元素。
参考：在动态创建的元素上进行事件绑定？。 p> 

  $（。sortable）。sortable（{恢复：true，connectWith：  .draggable}）; $（。draggable）。draggable（{connectToSortable： .sortable，helper： clone，恢复： true，占位符： droppable-placeholder}））; $（ .sortable）。draggable（{connectWith： .draggable}）; $（ ul，li）。disableSelection（）; //请参见下面的更改$（。draggable-column，.droppable-column ）.on（ click， .close-list-item，function（event）{event.preventDefault（）; console.log（ close list item named）; $（this）.closest（'li '）.remove（）;}）;  

  ul {列表式le-type：无；边距：0;填充：0;底边距：0.7em; float：left;} li {margin：0.5em;填充：0.5em;宽度：200像素；边框：1像素纯黑色；}。可拖动的列{高度：100％；}。可放下的物品{边框：1像素纯黑色；填充：0.5em;向左飘浮; align-content：space-between;}。sortable {width：230px;高度：10em；溢出：自动；边框：1px纯黑色； background-color：lightgrey;}。droppable-placeholder {background-color：yellow;}。row {display：flex; / *等于孩子的身高* /}。col {flex：1; / *另外，等宽* /填充：1em； border：solid;}  

 < script src = https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src = https://cdnjs.cloudflare.com/ajax/ libs / jqueryui / 1.12.1 / jquery-ui.min.js>< / script>< link rel = stylesheet type = text / css href = https://cdnjs.cloudflare.com /ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css />< div class = row> < div class = col-xs-4 draggable-column> < ul class => < li class = draggable> 1将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < li class = draggable> 2将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < li class = draggable> 3将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < li class = draggable> 4将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < li class = draggable> 5将我拖到< a href =＃ class = close-list-item> < i class = fa fa-window-close< / i> < / a> < / li> < / ul> < / div> < div class = col-xs-8 droppable-column> < div class = droppable-item> < h3>项目1< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3 class =文本中心>项目2< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3>项目3< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3>项目4< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3>项目5< / h3> < ul class = sortable> < / ul> < / div> < div class = droppable-item> < h3>项目6< / h3> < ul class = sortable> < / ul> < / div> < / div>< / div>


I have a list of items that are draggable onto some boxes. I have added a close button to the list items. The close button works on the original list item but not on the clones.

$(".sortable").sortable({
    revert: true,
    connectWith: ".draggable"
});
$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "true",
    placeholder: "droppable-placeholder"
});
$(".sortable").draggable({
    connectWith: ".draggable"
});

$("ul, li").disableSelection();
$(".close-list-item").click(function(event) {
    event.preventDefault();
    console.log("close list item called");
    $(this).closest('li').remove();
});

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.7em;
    float: left;
}

li {
    margin: 0.5em;
    padding: 0.5em;
    width: 200px;
    border: 1px solid black;
}

.draggable-column {
    height: 100%;
}

.droppable-item {
    border: 1px solid black;
    padding: 0.5em;
    float: left;
    align-content: space-between;
}

.sortable {
    width: 230px;
    height: 10em;
    overflow: auto;
    border: 1px solid black;
    background-color: lightgrey;
}

.droppable-placeholder {
    background-color: yellow;
}

.row {
    display: flex;
    /* equal height of the children*/
}

.col {
    flex: 1;
    /* additionally, equal width */
    padding: 1em;
    border: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="row">
    <div class="col-xs-4 draggable-column">
        <ul class="">
            <li class="draggable ">1 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">2 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">3 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">4 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">5 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="col-xs-8 droppable-column">

        <div class="droppable-item">
            <h3>
              Item 1
            </h3>
            <ul class="sortable">

            </ul>
        </div>
        <div class="droppable-item">
            <h3 class=" text-center">
              Item 2
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 3
            </h3>
            <ul class="sortable">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 4
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 5
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 6
            </h3>
            <ul class="sortable ">

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

</div>

When the items are dragged into a box, a clone is created, The close button the clone does not close as expected. How do I get the clones close buttons working?

解决方案

Since the dropped li element (and the close button inside it) is dynamically generated, you need to use the below syntax to bind events to it. The syntax you used won't bind events to dynamically created elements. Reference: Event binding on dynamically created elements?.

$(".sortable").sortable({
    revert: true,
    connectWith: ".draggable"
});
$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "true",
    placeholder: "droppable-placeholder"
});
$(".sortable").draggable({
    connectWith: ".draggable"
});

$("ul, li").disableSelection();
// See change in the below line
$(".draggable-column, .droppable-column").on("click", ".close-list-item", function(event) {
    event.preventDefault();
    console.log("close list item called");
    $(this).closest('li').remove();
});

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.7em;
    float: left;
}

li {
    margin: 0.5em;
    padding: 0.5em;
    width: 200px;
    border: 1px solid black;
}

.draggable-column {
    height: 100%;
}

.droppable-item {
    border: 1px solid black;
    padding: 0.5em;
    float: left;
    align-content: space-between;
}

.sortable {
    width: 230px;
    height: 10em;
    overflow: auto;
    border: 1px solid black;
    background-color: lightgrey;
}

.droppable-placeholder {
    background-color: yellow;
}

.row {
    display: flex;
    /* equal height of the children*/
}

.col {
    flex: 1;
    /* additionally, equal width */
    padding: 1em;
    border: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="row">
    <div class="col-xs-4 draggable-column">
        <ul class="">
            <li class="draggable ">1 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">2 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">3 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">4 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable ">5 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="col-xs-8 droppable-column">

        <div class="droppable-item">
            <h3>
              Item 1
            </h3>
            <ul class="sortable">

            </ul>
        </div>
        <div class="droppable-item">
            <h3 class=" text-center">
              Item 2
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 3
            </h3>
            <ul class="sortable">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 4
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 5
            </h3>
            <ul class="sortable ">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 6
            </h3>
            <ul class="sortable ">

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

</div>

这篇关于jQuery UI可拖动克隆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆