Я новичок в Jquery, и моя задача:
У меня есть таблица, и когда я выбираю строку, я должен получить небольшое всплывающее окно с элементами строки, прикрепленными к указателю мыши, и я должен быть в состоянии бросить в контейнер div, при падении на контейнер я должен отобразить детали строки ,
Поэтому я немного погуглил, но не смог найти плагин для своей работы, я мог найти плагины, которые можно перемещать внутри таблицы, но не вне таблицы, поэтому я начал работать самостоятельно.
Я создал простую таблицу и диалоговое окно, когда я нажимаю на диалоговое окно, всплывающее окно должно открываться, а когда мышь нажата, диалоговое окно должно быть закрыто / скрыто. Я могу переместить сообщение div, когда мышь нажимается на столе, но не может скрыть сообщение div, так как это событие не запускается, может кто-нибудь помочь мне в этом:
Или я буду очень рад, если есть готовый плагин или любой лучший вариант для решения проблемы ...
<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>