标签: draggable

jquery UI datepicker功能很棒,但我想复制谷歌分析样式日期选择器,您可以通过从头到尾拖动来选择一系列日期.我不认为日期选择器可以做到这一点,也不认为优秀的灯丝组范围选择器.

以前有人这样做过,并且有一些mod到jquery ui datepicker或其他一些参考供我考虑？

谢谢

$('#element').draggable ({
    stop: function () {
        alert ('stopped');
        //do some action here
    }
}).trigger('stop');

没有任何反应,思想#element现在是可拖动的,事件在拖动完成后执行.我尝试.triggerHandle过和'dragstop'eventtype一样,没有运气

我试图用jQuery UI实现这种效果 - 非常像你在Facebook上裁剪图像的方式:

http://blog.creonfx.com/examples/javascript/facebook-cropping-mootools.html

这是一个非常简单的HTML测试用例(imga div):

<div>
    <img src="fat_cat.jpg">
</div>

这是符合目的的逻辑 - 但它尚未完成:

$("img").draggable({ drag: dragHandler });

function dragHandler(event, ui) {
    var x = event.target.x - event.target.parentNode.offsetLeft;
    var y = event.target.offsetTop;

    if(x > 0) {
        // How to constrain the movement here?
    }
    if(x < -(event.target.offsetWidth -
            event.target.parentNode.offsetWidth)) {
    }
    if(y > 0) {
    }
    if(y < -(event.target.offsetHeight - 
             event.target.parentNode.offsetHeight)) {
    }

    $("p").text(x + ", " + y);
}

我的第一次尝试是修改所有多个访问点中的offsetLeft&offsetTop变量,但似乎没有什么对我有用.

以下是上面解释的jsFiddle:http …

我正在开发我的第一个JQuery项目,而且我遇到了一些障碍.我正在尝试允许拖放重新排序一组嵌套列表(ul).除定位外,一切正常.目标是使可拖动的相对于光标垂直居中(水平移动受到限制),以便可以容易地丢弃具有嵌套在其中的元素的li.这是相关的JS:

$(function() {
$( ".organizerlink" ).draggable({ axis: "y",
    containment:"#organizer",
    scroll: false ,
    helper: "original",
    revert: "invalid",
    cursorAt: { top: Math.round($(this).outerHeight() / 2)}
});

和HTML:

<ul id="organizer">
<li class="organizerTarget">&nbsp</li>
<li class="organizerlink" id="dbid-1">Page
    <ul><li class="organizerTarget organizerNewParent">&nbsp;</li></ul>
</li>
<li class="organizerTarget">&nbsp</li>
<li class="organizerlink" id="dbid-2">About
    <ul>
        <li class='organizerTarget'>&nbsp;</li>
        <li class='organizerlink' id="dbid-3">Another Page<ul><li class="organizerTarget organizerNewParent">&nbsp;</li></ul></li>
        <li class='organizerTarget'>&nbsp;</li>
        <li class='organizerlink' id="dbid-4">Example<ul><li class="organizerTarget organizerNewParent">&nbsp;</li></ul></li>
    </ul>
</li>
<li class="organizerTarget">&nbsp</li>
<li class="organizerlink" id="dbid-27">Stuff
    <ul><li class="organizerTarget organizerNewParent">&nbsp;</li></ul>
</li>

我已经尝试过的一些东西:

• 将cursorAt设置为$(this).height() - 没有用,我猜高度()拉高了css高度,但它们没有明确定义所以它跳转到0
• 将它设置为outerHeight()会在firebug中给出一个错误"elem.style is undefined"

我知道outerHeight元素存在于jquery中,并且基于API文档,它似乎可以自动计算,即使CSS未定义,所以我认为这是正确的方法,也许是$(这只是寻找它的错误点.

我在尝试使用packery和draggabilly来创建可排序的项目网格时遇到问题.

我也尝试了jquery ui dragabble,问题仍然存在.当我拖放项目时,可以打破垂直对齐,以便项目"按下"部分沿着行向下.这也打破了物品的顺序.

http://jsfiddle.net/foobass/sasrx654/

如果您水平拖动项目,它会卡入到位并对齐.如果垂直拖动,可能会失去对齐,它不会正确捕捉到位.最后的项目位置也会改变.

任何人都可以建议我可能做错了吗？

   var container = document.querySelector('#container');

   var packery = new Packery(container, {
        rowHeight: '.module-sizer',
        itemSelector: '.module',
        columnWidth: '.module-sizer',
        isInitLayout: true,
        isResizeBound: true
   });

似乎由于某种原因,被删除项目的"顶部"css值和下面的项目被动态设置为不正确的值.

我试过让它起作用，但这就是发生的事情。

1. 使用 react-draggable npm 包，我能够使内容可拖放。但是整个对话的背面保持原位，之后看起来已经损坏了。

我也在网上找到了这个 https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503，

import { Modal } from 'react-bootstrap'
import ModalDialog from 'react-bootstrap/lib/ModalDialog'
import Draggable from 'react-draggable'

class DraggableModalDialog extends React.Component {
    render() {
        return <Draggable handle=".modal-title"><ModalDialog 
{...this.props} /></Draggable>
    }
}

// enforceForce=false causes recursion exception otherwise....
export default ({titleIconClass, modalClass, children, title,...props}) =>
<Modal dialogComponent={DraggableModalDialog} show={true} enforceFocus={false} backdrop="static" {...props}>
    <Modal.Header closeButton>
        <Modal.Title>
            {title}
        </Modal.Title>
    </Modal.Header>
    <Modal.Body>
        {children}
    </Modal.Body>
</Modal>

我从搜索中得到的这段代码，我实际上无法让它工作。

尤其是这个，

<ModalDialog {...this.props} />

，我不明白为什么要送道具，送什么样的道具。

和

<Modal dialogComponent={DraggableModalDialog} show={true} enforceFocus={false} backdrop="static" {...props}>

<------ {...props} …

CORE ISSUE:我需要正确地确定<div>嵌套在可调整大小的父级中的子级的高度<div>.在调整父级的大小时,子级不应超出父级的范围.父本身应该受到限制,以免它缩小到超出孩子的最小可滚动范围.

DEAD ENDS:通过几个小时的研究,我了解到CSS即使具有该calc()功能,也无法<div>动态设置高度和宽度.此外,似乎为了防止子级<div>溢出其父级维度,父级本身必须具有固定大小.在后一种情况下,样式喜欢height: auto; height: inherit;和height: 100%;可能都会产生相同的结果.

之前已经在这里提出了类似的问题,但我找到的都没有解决调整大小问题.例如,提供给以下问题的解决方案无法正确解决我的问题.

防止子div溢出父div

在我的情况下,我有一个<div>用户调整大小和/或拖动到屏幕的任何部分.<div>如有必要,它的内容应自动滚动.在任何情况下,它们都不应超过容器的尺寸,即可调整尺寸的容器<div>.我的情况要求我不使用jQuery,但欢迎使用JavaScript解决方案.(即使PERL可能也值得,因为我将提供页面并通过来自Perl平台的AJAX进行更新.)

下面包含一个完整工作的示例,其中显示了子项如何<div>超过其父项,即使启用了滚动也是如此,无论父项<div>的大小如何调整都会发生这种情况.(我在Firefox和Safari中测试过它.)

请注意,在我的实际应用程序中,<div>将通过<select>菜单中的每个用户选择通过AJAX提供内容,并且内容将具有不同的长度.无论返回的长度如何,容器/父级<div>应保持与用户自己调整的大小相同.

<!DOCTYPE html>
<HTML lang="utf8">
<head>
<title>Example of Resizable/Draggable Container Div with Nested (Overflowing) Contents</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<style type="text/css">
.nested {
  background-color: #ffffcc;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 720px;
  height: inherit;
  color: …

Using some basic drag'n'drop features and i keep getting this message in Firefox, works well in Chrome though.

NoModificationAllowedError: Modifications are not allowed for this document

This happens when i try to use the clearData() function on the event when the ondrop event is fired.

HTML:

<!-- draggable element -->
<div draggable="true" ondragstart="onDragStart(event);">
<!-- dropzone element -->
<div ondragover="onDragOver(event);" ondragenter="onDragEnter(event);" ondrop="onDrop(event);"></div>

JS:

function onDragStart(event) {
    event
        .dataTransfer
        .setData('text/plain', 'test');
}
function onDragOver(event) {
    event.preventDefault();
}
function onDragEnter(event) {
    event.preventDefault(); // …

我有一个简单的react-beautiful-dnd 应用程序，其中有多行，您可以在自己的行中拖动组件。

我的问题是，当我在一行内拖动可拖动组件时，每一行都会发生内容移动和拖动组件消失的视觉效果。

这是展示我的问题的 gif：

这是一个 Codesandbox，其中包含该问题的交互式演示，并逐步重现该问题：

https://codesandbox.io/s/rbd-try-2-wgscc?fontsize=14&hidenavigation=1&theme=dark

Draggable 包在严格模式下导致错误：

警告：findDOMNode在 StrictMode 中不推荐使用。findDOMNode传递了一个位于 StrictMode 内的 DraggableCore 实例。相反，直接向要引用的元素添加 ref。在此处了解有关安全使用 refs 的更多信息：https : //reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage

显然他们从未修复过https://github.com/STRML/react-draggable/issues/440，你有什么好的/优雅的解决方案吗？