2
私はJqueryと私の仕事に新しいです： 私はテーブルを持っています。私は行を選択すると、マウスポインタにスティックされた小さなポップアップを取得する必要があります。 divコンテナにドロップするには、コンテナにドロップしたときに行の詳細を表示する必要があります。 私はいくつかのグーグルを持っていましたが、私の仕事のためのプラグインを見つけることができませんでした。テーブル内を移動できるプラグインを見つけることができました。 私は単純なテーブルとダイアログを作成しました。ダイアログをクリックするとポップアップが開き、マウスが上に来るとダイアログが閉じられる/隠されるはずです。私はテーブル上でマウスをクリックしたときにdivメッセージを移動することはできますが、そのイベントが発生していないのでdivメッセージを隠すことはできません。誰でも助けてください。 準備ができていればプラグイン、または問題のためのより良いオプション...誰でもJqueryの仕事に助けてください
<html>
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
<link rel="stylesheet" type="text/css" media="screen,print" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="screen,print" href="css/styledForm.css" />
<link rel="stylesheet" type="text/css" media="screen,print" href="css/filterBox.css" />
<link rel="stylesheet" type="text/css" media="screen,print" href="css/jquery.multiselect.css" />
<link rel="stylesheet" href="css/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="css/folder-tree-static.css" type="text/css" />
<link rel="stylesheet" href="css/context-menu.css" type="text/css" />
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.mouse.js"></script>
<script src="js/ui/jquery.ui.draggable.js"></script>
<script src="js/ui/jquery.ui.droppable.js"></script>
<script src="js/ui/jquery.ui.sortable.js"></script>
<!-- <script src="js/jqDnR.js"></script>
<script src="js/dragging.js"></script>-->
<title>
Draggable & Droppable Demo
</title>
<style>
#demo_leftcontainer
{
float: left;
width: 30%;
height: 100%;
vertical-align: middle;
}
#demo_rightcontainer
{
float: right;
}
}
#simple_dialog
{
width: 75px;
height: 75px;
position: absolute;
display: block;
right: 0;
bottom: 0;
background-color: #bcd5e6;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
var flag = 0;
function position (using)
{
$('#simple_dialog').position({
of: $('#devices_table'),
my: "left top",
at: "left top",
offset: $('#div_message').html(),
collision: "none none"
})
}
$('#devices_table').mousedown(function(e, ui){
$('#simple_dialog').show();
position(e);
})
$('#devices_table').mousemove(function(e){
var elem = $('#devices_table');
var off = elem.offset();
X_value = e.pageX - off.left;
Y_value = e.pageY - off.top;
$('#div_message').html(X_value+ ' ' + Y_value);
position(e);
})
$('#devices_table').mouseup(function(e){
$('#simple_dialog').hide();
})
})
</script>
<body>
<div id="flag_content">Flag value : </div>
<div id="div_message" >Positions</div>
<div id="demo_leftcontainer">
MAHESH
</div>
<div id="demo_rightcontainer">
<table id="devices_table" width="900px" border="1">
<tr>
<th>COL1</th>
<th>Name</th>
<th>Membership</th>
<th>Devices</th>
</tr>
<tr>
<td>ANS</td>
<td>SDFD-1</td>
<td>Direct</td>
<td>N/A</td>
</tr>
<tr>
<td>FODF</td>
<td>SDFDF-2</td>
<td>Direct</td>
<td>N/A</td>
</tr>
</table>
</div>
</body>
<div id="simple_dialog" style="display: none">
SIMPLE DIALOG
</div>
</html>
mousemoveRの代わりに、ライン71 – Juan