JqueryUIドラッグ可能なクローンイメージを置き換える

私はhttps://jqueryui.com/draggable/#sortableに基づいて関数を作成しますJqueryUIドラッグ可能なクローンイメージを置き換える

私は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/

私はhelper経由li内部に、その代わりに生クローンのクローンimgに結合するイベントを適用するために必要な、私はこれを処理するために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ドラッグ可能なクローンイメージを置き換える

答えて

関連する問題