JqueryUI可拖動克隆圖像替換src

我創建基於https://jqueryui.com/draggable/#sortable JqueryUI可拖動克隆圖像替換src

函數我有替換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'); 

    }); 
});

來源

2016-03-25 Ritero

我認爲這將在'drop'或'drag'來完成。你有什麼嘗試？ – Twisty

測試你的代碼在這裏：https://jsfiddle.net/Twisty/n43fqv54/，我沒有看到你想調整什麼。你正在替換當前的'li'還是將新的'li'添加到列表中？ – Twisty

我花了一秒鐘，但我認爲這個問題是動態創建的img。而不是使用.click()，您將需要使用.on('click', function(){});，以便該函數將應用於任何新創建圖像的點擊事件以及頁面加載時DOM中存在的圖像。

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

我發現我需要應用該事件的li內部結合克隆img，所以不是經由helper原始克隆的，我創建了一個function()處理這個問題。

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)); 
    }); 
});

來源

2016-03-25 16:47:07 Twisty

優秀的解決方案和代碼的很好的解釋。 – Ritero

JqueryUI可拖動克隆圖像替換src

回答

相關問題