jQueryのドラッグは、

私はHTML構造を持って適切に動作していないようです：CSSファイル（stylesheet.css）とjQueryのドラッグは、

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/> 
     <script type="text/javascript" src="skrypt.js"></script> 
    </head> 
    <body style="background-color:#FF8787"> 
     <div class="box"> 
      <br/> 
      <div id="container"> 
       <div class="droppable object"></div> 
       <div class="droppable object"></div> 
       <div class="droppable object"></div> 
       <div class="droppable object"></div> 
       <div class="droppable object"></div> 
       <div class="droppable object"></div> 
       <div class="droppable object"></div> 
       <div class="droppable object"></div> 
       <div class="droppable object"></div> 
      </div> 
      <br/> 
      <div id="draggable-container"> 
       <div class="draggable" style="background-color: blue"></div> 
       <div class="draggable" style="background-color: red"></div> 
       <div class="draggable" style="background-color: green"></div> 
      </div> 
     </div> 
    </body> 
</html>

：jQueryの、ドラッグドロップ可能とサイズ変更が可能なウィジェットを使用して

#container { 
    height: 300px; 
    width:300px; 
    background-color: #08457e; 
    margin: auto; 
} 
.object { 
    height: 60px; 
    width: 60px; 
    background-color: #00AFB8; 
    display:inline-block; 
    margin: 18.5px 18.5px 18.5px 18.5px; 
} 

.draggable { 
    height: 60px; 
    width: 60px; 
    display: inline-block; 
    margin: auto; 
} 

.task { 
    height: 30px; 
}

、I ".draggable" divを複数回使用するようにします。最初の使用（ドラッグ）した後、彼らは自分のui-draggableクラスを失うと私はこれが問題だと思う。新しく作成されたオブジェクトも同様です。ドラッグ可能なdivを適切に削除した場合、新しく作成された ".task" divのサイズは変更できますが、ドラッグすることはできません。

$(document).ready(function(){ 
    $('.draggable').draggable({ 
     snapMode: 'inner', 
     helper: myHelper 
    }); 
    $('.droppable').droppable({ 
     accept: '.draggable, .task', 
     drop: ondrop 
    }); 
}); 

function myHelper(event, ui){ 
    return $(this).clone(); 
} 

function ondrop(event,ui){ 
    var object = ui.draggable.clone().removeClass('draggable').addClass('task'); 
    makeDraggable(object); 
    makeResizable(object); 
    $(this).append(object); 
} 

function makeResizable(element){ 
    $(element).resizable(); 
} 

function makeDraggable(element){ 
    $(element).draggable({ 
     helper: function(){ 
      return $(this).clone(); 
     },   
     zIndex: 10 
    }); 
}

出典

2017-09-03 Mark

私はかなりあなたのコードが動作しない理由を知ることはできませんが、あなたがドロップハンドラ内で再びヘルパーハンドラでクローンを作成し、する必要はありませんが、ui.helperが与える：は、ここにそのためのjQueryのコードです（すでにクローンされている）ヘルパーにアクセスできます。また

、 .clone(true)は、それによってあなたはドロップクローンに .draggable()を再起動する必要性を避ける必要があり、元の要素のデータとイベントのすべてが含まれます。あなたが好きなもので終わるかもしれない

： - なしの約束

どこか、すべての点で

$(document).ready(function() { 
    $('.draggable').draggable({ 
     'snapMode': 'inner', 
     'helper': function(event, ui) { 
      return $(this).clone(true).get(0); // the documentation says to return an element, not jQuery object. 
     } 
     'zIndex': 10 // 'zIndex' is a draggable option that affects the dragged element while it is being dragged. 
    }); 
    $('.droppable').droppable({ 
     'accept': '.draggable, .task', 
     'drop': function(event, ui) { 
      ui.helper.removeClass('draggable').addClass('task').resizable().appendTo(this); // add .css('zIndex', 10) to control the zIndex of the cloned/appended element, if that's what you want. 
     } 
    }); 
});

、あなたは所望の効果を得ることができます。

出典

2017-09-03 20:22:32

答えて

関連する問題