跨页拖放div [英] Drag and drop divs across page?
问题描述
上图显示了我的基本页面布局，红线显示了拖放的内容。列表项中的任何一个都可以拖到任何网格框中。网格单元格动态调整大小（调整页面大小将调整网格单元格大小），在任何给定时间，所有页面总是适合页面，无滚动条。每个网格单元格具有从0开始的索引，从左到右，然后从上到下。我需要将列表项目ID（可以是任何数字）与其对应的网格单元格索引（在本例中为0-8）配对。
我甚至不知道我需要做的第一件事就是让这个拖放成为可能。我只是知道HTML的核心基础 - 所以我需要一些例子来证明这一点，而不仅仅是使用这个的一些简短的解释，因为我不知道这是什么意思。我可以找到的所有教程都与HTML 5相关，特别是与相同列表中的列表项相关，但在我的情况下，我需要将其移动到列表之外。
下面是我正在使用的页面结构。请注意，列表项在页面加载时动态添加...
<！DOCTYPE html PUBLIC - // W3C / / DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>查看相机< / title>
< script type =text / javascriptlanguage =javascript>
var selIndex = 0;
var lastListIndex = 0;
函数selBox（index）{
document.getElementById（'b'+ selIndex）.style.backgroundColor =Black;
selIndex = index;
document.getElementById（'b'+ selIndex）.style.backgroundColor =Blue;
}
function pageload（）{
AddListItem（'rtsp：//192.168.1.1'，'Test Item 1'）;
AddListItem（'rtsp：//192.168.1.2'，'Test Item 2'）;
AddListItem（'rtsp：//192.168.1.3'，'测试项目3'）;
selBox（0）;
camload（''）;
selBox（1）;
camload（''）;
selBox（2）;
camload（''）;
selBox（3）;
camload（''）;
selBox（4）;
camload（''）;
selBox（5）;
camload（''）;
selBox（6）;
camload（''）;
selBox（7）;
camload（''）;
selBox（8）;
camload（''）;
selBox（0）;
}
function AddListItem（address，caption）{
lastListIndex + = 1;
var i = lastListIndex;
var h ='< div id =camlistitem'+ i +'class =camlistitemonclick =camload（\''+ address +'\'）>';
h + = caption;
h + ='< / div>';
document.getElementById（'divCamList'）。innerHTML + = h;
}
函数camload（addr）{
var h ='';
if（addr ==''）{
h ='< div style =width：100％; height：100％; text-align：center; vertical-align：middle;> ;
h + ='< img src =Cam.jpgstyle =width：100px; height：80px; alt =没有相机选择';
h + ='< / div>';
} else {
h ='< OBJECT classid =clsid：9BE31822-FDAD-461B-AD51-BE1D1C159921codebase =http://downloads.videolan.org/pub/videolan/vlc/最新/ win32 / axvlc.cab';
h + ='id =player'+ selIndex +'events =Truestyle =width：100％; height：100％;>';
h + ='< param name =Srcvalue ='+ addr +'/>';
h + ='< param name =ShowDisplayvalue =True/>';
h + ='< param name =AutoLoopvalue =False/>';
h + ='< param name =AutoPlayvalue =True/>';
h + ='< embed id =vcl'+ selIndex +'type =application / x-google-vlc-pluginversion =VideoLAN.VLCPlugin.2
h + ='autoplay =yesloop =notarget ='+ addr +'style =width：100％; height：100％;>< / embed>< /对象>';
}
document.getElementById（'divContent'+ selIndex）.innerHTML = h;
}
< / script>
< style type =text / css>
body
{
height：100％;
}
* {margin：0px; border：0px; padding：0px; }
h3
{
font-size：14px;
font-weight：bold;
}
div.title
{
height：40px;
box-sizing：border-box;
overflow：hidden;
}
div.main
{
height：100％;
}
div.contentmain
{
顶部：40px;
bottom：0;
左：250px;
right：0;
overflow：hidden;
position：absolute;
}
div.side
{
顶部：40px;
bottom：0;
width：250px;
position：absolute;
背景：lightgrey;
}
.matrix
{
显示：表;
width：100％;
height：100％;
}
.row
{
显示：table-row;
}
div.contentbox
{
显示：table-cell;
width：33％;
}
table.selecttable
{
width：200px;
height：100％;
}
td.selecttable
{
text-align：center;
cursor：pointer;
颜色：白色;
}
div.camlist
{
}
div.camlistitem
{
background-color：Navy;
颜色：白色;
cursor：pointer;
margin-top：1px;
padding-left：5px;
}
div.camlistitem：hover
{
background-color：Blue;
}
< / style>
< / head>
< body onload =pageload（）>
< div id =divTitleclass =title>
< h1>查看相机< / h1>
< / div>
< div id =divMainclass =main>
< div class =side>
< h3> 1）单击框以选择视图：< / h3>
< div style =position：relative; float：left; width：100％;>
< table class =selecttableborder =1px>
< tr>
< td class =selecttableid =b0onclick =selBox（0）; style =background-color：Black>> 0< br />< / td>
< td class =selecttableid =b1onclick =selBox（1）; style =background-color：Black;> 1< br />< / td>
< td class =selecttableid =b2onclick =selBox（2）; style =background-color：Black;> 2< br />< / td>
< / tr>
< tr>
< td class =selecttableid =b3onclick =selBox（3）; style =background-color：Black;> 3< br />< / td>
< td class =selecttableid =b4onclick =selBox（4）; style =background-color：Black;> 4< br />< / td>
< td class =selecttableid =b5onclick =selBox（5）; style =background-color：Black;> 5< br />< / td>
< / tr>
< tr>
< td class =selecttableid =b6onclick =selBox（6）; style =background-color：Black>> 6< br />< / td>
< td class =selecttableid =b7onclick =selBox（7）; style =background-color：Black;> 7< br />< / td>
< td class =selecttableid =b8onclick =selBox（8）; style =background-color：Black>> 8< br />< / td>
< / tr>
< / table>
< / div>
< h3> 2）选择凸轮以在选定的框中显示：< / h3>
< div style =position：relative; float：left; width：100％;>
< div id =divCamListclass =camlist>
< div id =camlistitem0class =camlistitemonclick =camload（''）>
[无相机]
< / div>
< / div>
< / div>
< h3> 3）看不到相机？ < a href =http://www.videolan.org/vlc/>点击此处。< / a>< / h3>
< / div>
< div class =contentmain>
< div class =matrix>
< div class =row>
< div class =contentboxid =divContent0>< / div>
< div class =contentboxid =divContent1>< / div>
< div class =contentboxid =divContent2>< / div>
< / div>
< div class =row>
< div class =contentboxid =divContent3>< / div>
< div class =contentboxid =divContent4>< / div>
< div class =contentboxid =divContent5>< / div>
< / div>
< div class =row>
< div class =contentboxid =divContent6>< / div>
< div class =contentboxid =divContent7>< / div>
< div class =contentboxid =divContent8>< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
PS - 将有一张缺少的图片 Cam.jpg
更新
感谢 roflmao 的努力在下面的答案，我有一切工作正常现在。只是一个故障，当我拖动一个项目，它突出显示页面上的所有内容，但这是另一个故事。
您将要做的第一件事就是使用一个javascript库，无论是jQuery还是Prototype（jQuery是更流行的一个）。操作标准JS的方式是乞求跨浏览器兼容性问题。
一旦你放入jQuery，你可以使用jQuery UI库，并使用可拖放和可插拔的界面。检查此页面。
代码将看起来像这样：
http://jsfiddle.net/CZNhP/21/
$（function（）{
$（＃menu li）。draggable（{reset：true} ）;
$（＃container）。droppable（{
drop：function（event，ui））{
//在此您实例化您的媒体对象
//您可以使用
//this和ui.draggable
}
}）;
}访问您的对象被放置的位置）;
I'm building a single page which consists of a list (of div's) on the left and a grid (of div's) on the right. I would like to add the ability for a user to click and drag one of the list items and drop it over one of the grid boxes. I'm not using HTML5, but I know it comes with this native capability. I'm trying to avoid HTML 5 at the moment.
The above illustration shows my basic page layout and the red line shows how things will be dragged/dropped. Any of the list items may be dragged into any of the grid boxes. The grid cells are dynamically sized (resizing the page will resize the grid cells) to where everything always fits in the page at any given time, no scroll bars. Each grid cell has an index starting from 0, counting from left-to-right then top-to-bottom. I need to pair the list item ID (could be any number) with its corresponding grid cell index (0-8 in this case).
I don't know even the first thing I need to do to make this drag/drop possible. I just know the very core basics of HTML - so I need some example to demonstrate this, not just some brief explanation of use this and that, because I won't know what this and that means. All the tutorials I can find are related to either HTML 5 in particular or related to just moving a list item within the same list - but in my case I need to move it outside the list.
Here's the page structure which I am working with below. Note that the list items are dynamically added upon page load...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>View Cameras</title>
<script type="text/javascript" language="javascript">
var selIndex = 0;
var lastListIndex = 0;
function selBox(index) {
document.getElementById('b' + selIndex).style.backgroundColor = "Black";
selIndex = index;
document.getElementById('b' + selIndex).style.backgroundColor = "Blue";
}
function pageload() {
AddListItem('rtsp://192.168.1.1', 'Test Item 1');
AddListItem('rtsp://192.168.1.2', 'Test Item 2');
AddListItem('rtsp://192.168.1.3', 'Test Item 3');
selBox(0);
camload('');
selBox(1);
camload('');
selBox(2);
camload('');
selBox(3);
camload('');
selBox(4);
camload('');
selBox(5);
camload('');
selBox(6);
camload('');
selBox(7);
camload('');
selBox(8);
camload('');
selBox(0);
}
function AddListItem(address, caption) {
lastListIndex += 1;
var i = lastListIndex;
var h = '<div id="camlistitem' + i + '" class="camlistitem" onclick="camload(\''+address+'\')">';
h += caption;
h += '</div>';
document.getElementById('divCamList').innerHTML += h;
}
function camload(addr) {
var h = '';
if (addr == '') {
h = '<div style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">';
h += ' <img src="Cam.jpg" style="width: 100px; height: 80px;" alt="No Camera Selected"';
h += '</div>';
} else {
h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" ';
h += 'id="player'+selIndex+'" events="True" style="width: 100%; height: 100%;">';
h += '<param name="Src" value="' + addr + '" />';
h += '<param name="ShowDisplay" value="True" />';
h += '<param name="AutoLoop" value="False" />';
h += '<param name="AutoPlay" value="True" />';
h += '<embed id="vcl' + selIndex + '" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" ';
h += 'autoplay="yes" loop="no" target="' + addr + '" style="width: 100%; height: 100%;"></embed></OBJECT>';
}
document.getElementById('divContent' + selIndex).innerHTML = h;
}
</script>
<style type="text/css">
body
{
height: 100%;
}
* { margin: 0px; border: 0px; padding: 0px; }
h3
{
font-size: 14px;
font-weight: bold;
}
div.title
{
height: 40px;
box-sizing: border-box;
overflow: hidden;
}
div.main
{
height: 100%;
}
div.contentmain
{
top: 40px;
bottom: 0;
left: 250px;
right: 0;
overflow: hidden;
position: absolute;
}
div.side
{
top: 40px;
bottom: 0;
width: 250px;
position: absolute;
background: lightgrey;
}
.matrix
{
display: table;
width: 100%;
height: 100%;
}
.row
{
display: table-row;
}
div.contentbox
{
display: table-cell;
width: 33%;
}
table.selecttable
{
width: 200px;
height: 100%;
}
td.selecttable
{
text-align: center;
cursor: pointer;
color: White;
}
div.camlist
{
}
div.camlistitem
{
background-color: Navy;
color: White;
cursor: pointer;
margin-top: 1px;
padding-left: 5px;
}
div.camlistitem:hover
{
background-color: Blue;
}
</style>
</head>
<body onload="pageload()">
<div id="divTitle" class="title">
<h1>View Cameras</h1>
</div>
<div id="divMain" class="main">
<div class="side">
<h3>1) Click box to select view:</h3>
<div style="position: relative; float: left; width: 100%;">
<table class="selecttable" border="1px">
<tr>
<td class="selecttable" id="b0" onclick="selBox(0);" style="background-color: Black;">0<br /></td>
<td class="selecttable" id="b1" onclick="selBox(1);" style="background-color: Black;">1<br /></td>
<td class="selecttable" id="b2" onclick="selBox(2);" style="background-color: Black;">2<br /></td>
</tr>
<tr>
<td class="selecttable" id="b3" onclick="selBox(3);" style="background-color: Black;">3<br /></td>
<td class="selecttable" id="b4" onclick="selBox(4);" style="background-color: Black;">4<br /></td>
<td class="selecttable" id="b5" onclick="selBox(5);" style="background-color: Black;">5<br /></td>
</tr>
<tr>
<td class="selecttable" id="b6" onclick="selBox(6);" style="background-color: Black;">6<br /></td>
<td class="selecttable" id="b7" onclick="selBox(7);" style="background-color: Black;">7<br /></td>
<td class="selecttable" id="b8" onclick="selBox(8);" style="background-color: Black;">8<br /></td>
</tr>
</table>
</div>
<h3>2) Select cam to show in selected box:</h3>
<div style="position: relative; float: left; width: 100%;">
<div id="divCamList" class="camlist">
<div id="camlistitem0" class="camlistitem" onclick="camload('')">
[No Camera]
</div>
</div>
</div>
<h3>3) Can't see the cameras? <a href="http://www.videolan.org/vlc/">Click Here.</a></h3>
</div>
<div class="contentmain">
<div class="matrix">
<div class="row">
<div class="contentbox" id="divContent0"></div>
<div class="contentbox" id="divContent1"></div>
<div class="contentbox" id="divContent2"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent3"></div>
<div class="contentbox" id="divContent4"></div>
<div class="contentbox" id="divContent5"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent6"></div>
<div class="contentbox" id="divContent7"></div>
<div class="contentbox" id="divContent8"></div>
</div>
</div>
</div>
</div>
</body>
</html>
PS - there will be a missing picture Cam.jpg
UPDATE
Thanks to the help of roflmao's effort on the answer below, I got everything working fine now. Just a glitch where when I drag an item, it highlights everything on the page, but that's another story.
Okay, so the first thing you'll want to do right off the bat is use a javascript library, either jQuery or Prototype (jQuery being the more popular one). Manipulating standard JS the way you are is begging for cross-browser compatibility issues.
Once you've put in jQuery, you can just use the jQuery UI library and use the draggable and droppable interfaces. Check this page out.
The code will look something like this: http://jsfiddle.net/CZNhP/21/
$(function() {
$("#menu li").draggable({reset: true});
$("#container").droppable({
drop: function(event, ui) {
// Here you instantiate your media object.
// You can access the place your object was dropped on with
// "this" and the draggged item with "ui.draggable"
}
});
});
这篇关于跨页拖放div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
