0

jqueryでドラッグアンドドロップしたいです。以下はテストコードです。しかし、私が望むのは、#droppable の特定の場所に #draggable を追加するのではなく、マウスが指す場所に #draggable をドロップすることです。誰かが助けてくれれば、とても感謝しています。

<!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>
4

1 に答える 1

1

次の行を削除できます。

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

この行を使用すると、要素は解放されると上にジャンプします (静的要素として動作します)。それがなければ、それが解放された場所、つまり「マウスが指している場所」に配置されます。

于 2013-07-02T22:48:03.610 に答える