可拖动的 Div

• 下载源代码 - 1.83 KB

引言

在今天的Web开发中，我们使用更多的JavaScript/DOM/CSS/DHTML来实现丰富的内容和用户体验。

在呈现内容/数据时，我们经常使用div来划分文档的区域/部分。 在某些时候，我们可能需要为我们的div添加拖放功能，或者仅仅是拖动功能。 对于此，我们可以使用像Rico、script.aculo.us、moo.fx等JavaScript框架，但是仅仅为了添加div的可拖动功能，我们真的需要将这些框架添加到我们的项目/站点中吗，尤其是在大小和代码管理/维护都很重要的前提下？

背景

一点JavaScript、HTML和CSS经验将帮助你修改脚本以适应你的需求。

Using the Code

在客户的项目中工作时，我遇到了一些在IE下可以工作但在Firefox下不能工作的脚本，以及一些在Firefox下可以工作但在IE下不能工作的脚本。 最后，我决定编写一个可以在IE、Firefox和Opera等浏览器中工作的脚本。 我合并/修改了那些不能跨浏览器工作的脚本，并删除了添加拖动功能时更改现有代码的复杂性。

如果你有一个现有的页面/站点，并且想要为div添加拖动功能，除了执行以下两个步骤外，无需进行任何更改：

1. 在页面中包含JavaScript。
2. 为现有的div添加CSS类 class="drag"。

就是这样。

如果div已经有CSS类，那么这样做：class="yourexisting_css_class drag"。

// The div with drag feature
<div id="Dialog" 
       style="width:316px;height:119px;max-width:316px;
              position:absolute;top:50px;left:140px; z-index:1000;" 
       class="drag">
  <table width="100%" style="width:315px;height:119px" 
         cellspacing="0" cellpadding="0" 
         class="alertsBox" id="dialog_table">
    <tr style="cursor:move">
      <td class="alertsBoxTitle notselectable" colspan="2" 
            align="left" height="21" 
            style="cursor:move;background-color:#32426F">Drag Me</td>
    </tr>
    <tr>
      <td align="center" colspan="2" height="5"> </td>
    </tr>
    <tr>
      <td align="center" colspan="2">
        <table width="97%"  border="0" 
              cellspacing="0" cellpadding="0" align="center">
          <tr>
            <td valign='top' align="center">
              </td>
          </tr>
          <tr>
            <td valign='top' colspan="2" class="Text">You can place text here</td>
          </tr>
          <tr>
            <td valign='top' colspan="2" 
              align="center"><br/><input 
              type="button" value="Ok"/></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>

关注点

你可以定义div可以拖动的区域边界。 目前，我实现了在整个页面内拖动。 你可以通过更改drag.js文件中的“setdragBounds”函数来更改/设置可拖动区域的边界。

此外，你可以像平常一样向div添加任何内容，例如图像、文本等。

你可以将此拖动功能不仅添加到div，还可以添加到其他HTML元素，例如图像、输入框等。

注意

在为div添加拖动功能时，单击整个div内的任何位置都会使其可拖动。 因此，我在“drag”函数中添加了一些排除项。

while (firedobj.tagName!=topelement && firedobj.className!="drag" && 
  firedobj.tagName!='SELECT' && firedobj.tagName!='TEXTAREA' && 
  firedobj.tagName!='INPUT' && firedobj.tagName!='IMG'){

你可以使用类名、ID等在此处添加排除项。 根据你的需要进行修改。