Question

我根据https://jqueryui.com/draggable/#sortable

创建函数

我在更换src克隆项时遇到问题。如果我将项目拖动到可排序列表（克隆）。我无法替换克隆项目的src。 Src转换通常适用于列表中的所有其他项目。

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Test Drag and replace photo</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>

<body>

    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            margin-bottom: 10px;
        }

        li {
            margin: 5px;
            padding: 5px;
            width: 230px;
        }
    </style>

    </head>

    <body>
        <div class="row">
            <div class="col-md-2">
                <ul>
                    <li id="draggable" class="ui-state-highlight"> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Jupiter.jpg"></li>
                </ul>
            </div>
            <div class="col-md-8">
                <ul id="sortable">

                    <li class="ui-state-default"> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/5/57/Cassini_Helene_N00086698_CL.jpg"></li>
                    <li class="ui-state-default"> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/5/57/Cassini_Helene_N00086698_CL.jpg"></li>
                    <li class="ui-state-default"> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/5/57/Cassini_Helene_N00086698_CL.jpg"></li>
                    <li class="ui-state-default"> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/5/57/Cassini_Helene_N00086698_CL.jpg"></li>

                </ul>
            </div>



    </body>

</html>

脚本

$(function() {
    $("#sortable").sortable({
        revert: true
    });
    $("#draggable").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $("ul, li").disableSelection();

    $("img").click(function() {
        ivo = $(this).attr('src')
        console.log(ivo)

        $(this).attr('src', 'https://upload.wikimedia.org/wikipedia/commons/f/f6/Zeta_Puppis.png');

    });
});

Answer 1

我花了一秒钟，但我认为问题在于动态创建的def update authorize @contact if @contact.update(contact_params) redirect_to(some_path), success: 'Updated Successfully.' else # This next line is what makes it work as expected for that edge case @contact.contacts_teams.reload if @contact.errors.keys.include?(:A_Team) render :edit end end。您需要使用img，而不是使用.click()，以便该函数将应用于任何新创建的图像的click事件以及页面加载时DOM中存在的图像。

工作示例：https://jsfiddle.net/Twisty/n43fqv54/2/

我发现我需要将事件绑定应用于.on('click', function(){});内的克隆img，因此我创建了一个li而不是原始克隆来自helper处理这个。

<强> JQuery的

function()

JqueryUI可拖动克隆图像替换src

1 个答案: