перетащить и убрать помещенный элемент в положение мыши

Я хочу сделать перетаскивание с jQuery. Ниже приведен код тестирования. Но я хочу, чтобы #Draggable в том месте, где моя мышь указывает, вместо того, чтобы просто добавить #draggable в определенное место в #droppable. Я очень ценю это, если кто-то может помочь.перетащить и убрать помещенный элемент в положение мыши

<!doctype html> 

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Droppable - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<style>#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
</style> 
<script> 
$(function() { 
var dropHelp=true 
$("#draggable").draggable({ 
    revert:'invalid', 
    helper:'clone', 
}); 
$("#droppable").droppable({ 
    // accept:"#draggable", 
    // activeClass: "ui-state-hover", 
    // hoverClass: "ui-state-active", 
     drop: function(event, ui) { 
     if(dropHelp){ 
     //clone and remove positioning from the helper element 
      var newDiv = $(ui.helper).clone(true) 
      .removeClass('ui-draggable-dragging') 
      .css({position:'relative', left:0, top:0});  

     $(this).append(newDiv); 

    //drop the draggable source element 
    } else { 
     $(this).append(ui.draggable); 
    } 
    } 
}); 
}); 
</script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
<p>Drag me to my target</p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
<p>Drop here</p> 
</div> 
</body> 
</html>

источник

2013-07-02 yiro

Вы можете удалить эту строку:

//.css({position:'relative', left:0, top:0});

С этой линией элемент подпрыгивает вверх при отпускании (ведет себя как статический элемент); без него он позиционируется там, где он выпущен - «где точки мыши».

источник

2013-07-02 22:48:03

Это работает. Большое спасибо! – yiro

Добро пожаловать. Не стесняйтесь галочки :) –

Привет, Андей, я создал страницу по методу. Но перетаскиваемый элемент всегда падает в странном месте, а это не точка мыши. Вот код: [link] (http://jsfiddle.net/yiro/GvMPw/) Не могли бы вы посмотреть? И перетаскиваемый элемент нельзя перетаскивать снова после его удаления. Я также смущен этой проблемой. Большое спасибо. – yiro

перетащить и убрать помещенный элемент в положение мыши

ответ

Смежные вопросы