JqueryUI 可拖动克隆图像替换 src答案

【问题标题】：JqueryUI Draggable clone image replace srcJqueryUI 可拖动克隆图像替换 src
【发布时间】：2016-07-12 17:50:02
【问题描述】：

我根据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');

    });
});

【问题讨论】：

我认为这将在drop 或drag 中完成。你试过什么？
在这里测试了您的代码：jsfiddle.net/Twisty/n43fqv54，我看不出您要调整什么。您是替换当前的li 还是将新的li 添加到您的列表中？

标签： jquery jquery-ui

【解决方案1】：

花了我一秒钟，但我认为问题在于动态创建的img。除了使用.click()，您将希望使用.on('click', function(){});，这样该函数将应用于任何新创建的图像以及页面加载时DOM中存在的图像的点击事件。

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

我发现我需要将事件绑定应用到li 内的克隆img，因此我创建了一个function() 来处理此问题，而不是通过helper 进行原始克隆。

JQuery

function srcSwap(target) {
  var ivo = target.attr("src");
  console.log(ivo);
  target.attr("src", 'https://upload.wikimedia.org/wikipedia/commons/f/f6/Zeta_Puppis.png');
}

$(function() {
  $("#sortable").sortable({
    revert: true,
  });

  $("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: function(e) {
      var $c = $(e.target).parent().clone();
      $c.find("img").on("click", function() {
        srcSwap($(this));
      });
      return $c;
    },
    revert: "invalid"
  });

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

  $(".img-responsive").on("click", function() {
    srcSwap($(this));
  });
});

【讨论】：

优秀的解决方案和对代码的精彩解释。