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>

与CSS文件（stylesheet.css中）：

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

使用jQuery可拖动，可放开和可调整大小的窗口小部件，我想让“.draggable”div不止一次被使用。看起来，第一次使用（拖动）后，他们失去了他们的可拖动的类，我认为这是问题。新创建的对象也一样。如果我正确放弃了一个可拖动的div，新创建的“.task”div可以调整大小，但不能拖动。以下是一个jQuery代码：

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

答

我不是很明白为什么你的代码不能正常工作，但你不应该需要在辅助处理器在下拉处理程序进行克隆，并再次，在ui.helper给你访问（已经克隆）的帮手。

此外，.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. 
     } 
    }); 
});

某处，你可能获得预期的效果 - 任何承诺。

jQuery的可拖动似乎并没有正常工作

相关推荐