【问题标题】:Drag and Drop not working with over flow auto拖放不适用于溢出自动
【发布时间】:2012-03-16 06:05:30
【问题描述】:

您好朋友,我正在尝试在我的页面上创建拖放功能,但我遇到了一些问题。您可以下载我的文件here 问题是当您打开 index2.html 时,它与 css 完美配合

#leftColumn{
        width:300px;
        float:left;     
    }

但是当我在 index.html 中的 id leftColumn 上添加一些 css 时

#leftColumn{
        width:300px;
        float:left;
        height:100px;
        overflow:auto;

    }

正如您在文件中看到的那样,它完全停止工作,在 index,html 左侧可拖动框不随鼠标移动请帮助。

谢谢

【问题讨论】:

  • 不要包含 zip 文件,没有人会打开它们。转到jsfiddle.net并适当地放置您的代码(脚本部分中的脚本,html部分中的html,css部分中的css,当您单击顶部的“运行”时,“结果”将被传播。)
  • 如果您不想下载 zip 文件,那么您可以在这里看到两个文件,第一个文件完美链接是 cleversoftwares.com/demo/drag/index2.html,第二个文件是 cleversoftwares.com/demo/drag
  • 使用 jsfiddle ,因此人们也可以实时使用您的代码并直接更改它。
  • 你好朋友这里是 jsfiddle 上的链接jsfiddle.net/82jue/2

标签: javascript jquery html css


【解决方案1】:

你需要从你正在抓取的孩子的父母中减去“.scrollTop”


编辑:

js/drag-drop-custom.js

我更改了第 533 行
this.dragObjCloneArray[this.numericIdToBeDragged].style.top = dhtmlSuiteCommonObj.getTopPos(this.dragDropSourcesArray[this.numericIdToBeDragged][0]) + 'px';
-to-
this.dragObjCloneArray[this.numericIdToBeDragged].style.top = dhtmlSuiteCommonObj.getTopPos(this.dragDropSourcesArray[this.numericIdToBeDragged][0]) - this.dragObjCloneArray[this.numericIdToBeDragged].parentNode.scrollTop + '像素';

我更改了第 597 行
dragObj.style.top = topPos + 'px';
-到-
dragObj.style.top = topPos -dragObj.parentNode.scrollTop + 'px';

我更改了第 670 行
var targetY = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropSourcesArray[numId][0]);
-to-
var targetY = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropSourcesArray[numId][0]) - this.dragObjCloneArray[numId].parentNode.scrollTop;

现在它在您的示例中运行良好,但这用于垂直问题,如果您打算让它水平滚动,那么您将拥有为 scrollLeft 做同样的事情。如果您需要帮助,那么我很遗憾地告诉您,这对您来说太先进了。

【讨论】:

  • 你好,哈利。如何减去“.scrollTop”。我正在研究它,但它停止工作。请分享您的经验谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-09-24
  • 2021-08-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-07-10
  • 2013-09-10
相关资源
最近更新 更多