标签: draggable

有没有办法让div通过jquery draggable()拖动时彼此不重叠？

我有一堆用户可以拖动但我不能让它们相互重叠的div.

基本上我正在创建一个画布,用户可以在网站上自由移动网站的内容,但移动时不需要重叠其他内容.有任何想法吗？

多么满口.

基本上我有一个父母<div>,里面有一个<iframe>.我需要iframe中的一个元素作为拖动父div的句柄.这甚至可能吗？

我试过了:

$(node).draggable("option","handle",$('iframe',node).contents().find('#handle'));
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);

它针对的是正确的DOM元素,但它不会拖动.有可能在iframe上覆盖一个隐藏的div,但我发现当position是绝对的时,iframe会将事件放在div上.奇怪.

是否可以使用基本的jQuery脚本实现拖放(不使用jQuery UI)？

我的WPF应用程序有一个UserControl应该看起来和行为像弹出窗口,但它不是一个窗口.控件不会从Window类中下降的原因是因为它包含第三方虚拟屏幕键盘,并且该控件必须与TextBox它在单击其按钮时将输入字符发送到的控件位于同一窗口中.如果键盘控件不在同一窗口中,则甚至看不到TextBox控件.

拖动对话框时,我遇到的问题是表现糟糕.它足够慢,鼠标离开拖动区域,它停止跟随鼠标.我需要一个更好的方法.

以下是控件的xaml摘录:

<Grid Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Border Background="{DynamicResource PopupBackground}"
            BorderBrush="{DynamicResource PopupBorder}"
            BorderThickness="5,5,5,0"
            MouseLeftButtonDown="Grid_MouseLeftButtonDown"
            MouseLeftButtonUp="Grid_MouseLeftButtonUp"
            MouseMove="Grid_MouseMove">
    . . .
    </Border>
</Grid>

这是鼠标事件处理程序:

    private void Grid_MouseLeftButtonDown( object sender, MouseButtonEventArgs e ) {
        Canvas canvas = Parent as Canvas;
        if ( canvas == null ) {
            throw new InvalidCastException( "The parent of a KeyboardPopup control must be a Canvas." );
        }
        DraggingControl = true;
        CurrentMousePosition = e.GetPosition( canvas …

我有mainViewController,但我有一个小的UIView,当你点击一个内部被激活MKAnnotationView的MKMapKit,所以我需要UIView为可拖动在屏幕的任何部分.

我的应用的示例屏幕截图:

圆是一个点的例子,我想我可以拖动"小"UIView的任何一点.

我尝试使用,UITapGestureRecognizer但它没有用,因为我的代码不够好,我无法使它可拖动,因为它只是点击,而不是点击和移动.

我希望你能帮助我.

使用jQuery Draggable

如何限制拖动只能在一个方向上拖动？
即,只有当时只有顶部或者只有底部axis: 'y'
,或者只有左边或者只有当时才有axis: 'x'

这意味着如果我想(with axis set to 'y')将拖动器仅拖动到bottom,那么它应该无法将其拖动到顶部,即当它试图拖向顶部时它应该保持在其位置

这是我尝试但没有工作,即可拖动仍然向上拖动

$('. draggable').draggable({
    axis: 'y',
    handle: '.top'
    drag: function( event, ui ) {
       var distance = ui.originalPosition.top - ui.position.top;

       // if dragged towards top
       if (distance > 0) { 
           //then set it to its initial state
           $('.draggable').css({top: ui.originalPosition.top + 'px'});
       }
   }
});

我在UITableView中有一个带有可拖动内容的iPad应用程序... tableView可以水平滚动并且可以拖动图像(UIImageView的子类被覆盖touchesBegan:等)

直到iOS 7 tableView.delaysContentTouch=YES;,UITableView按预期工作,应用程序能够区分tableView中的水平滚动(用手指在tableview上快速移动)和在tableviews contentView中拖动一个元素(在第二个上按住手指draggable直到tableview转发到touchesBegan:contentView中的UIImageView子类的触摸.

现在在iOS 7下滚动几乎是不可能的,因为内容的拖动会立即触发.代码没有改变.

任何人都有类似的东西,并找到了解决方案？

提前致谢!

我正在使用jquery ui draggable,我意识到当我向下拖动时(相对于左/右),我希望滚动灵敏度更小.是否可以为垂直拖动和水平拖动设置不同的设置？

这是我目前的代码

   $(".myDraggable").draggable(
            {
                stack: ".myDraggable",
                scroll: true,
                scrollSensitivity: 250,
                scrollSpeed: 40,
                revert: function (event, ui) {
                    $(this).data("uiDraggable").originalPosition = {
                        top: 0,
                        left: 0
                    };
                    return !event;
                }
            }
        );

请帮忙解决问题,我在跳转div时解决了跳转层的问题,在某种程度上打开了div,我在这里找到了解决方案 - Webkit和jQuery draggable jump,但是当我把div旋转90度时,它没有移动到父div的边缘.如何使它可以移动到父div的右边缘.

更多信息:

<div class="template" id="template">
    <div id="box">Some text!</div>
</div>

CSS:

.template {
    width: 400px;
    height: 255px;
    position: relative;
    margin: 16px;
    border: 1px dotted #777;
    overflow: hidden;
}

#box {
    width: 100px;   
    border: 1px solid;
    background-color: red;
    position: absolute;
    left: 75px;
    top: 75px;
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -sand-transform: rotate(90deg);
    transform: rotate(90deg);
    text-align: center;
    cursor: move;
}

我已经找到的解决方案:

 $(document).ready(function () {
             var recoupLeft, recoupTop;
             $('#box').draggable({  
                 containment: "#template",
                 start: function (event, ui) {                     
                     var …

所以我看了ReorderableListView演示，看到他们有

“第二：const Icon（Icons.drag_handle）”

但是在查看reorderable_list.dart文件时，我注意到整个列表仍然可以在LongPressDraggable上拖动[第424行]。所以，我怎么能明确作出任何的源代码或适当改变我自己，为了使图标的实际拖动手柄？

CheckboxListTile(
      key: Key(item.value),
      isThreeLine: true,
      value: item.checkState ?? false,
      onChanged: (bool newValue) {
        setState(() {
          item.checkState = newValue;
        });
      },
      title: Text('This item represents ${item.value}.'),
      subtitle: secondary,
      secondary: const Icon(Icons.drag_handle),  // Make this Icon drag source
    );

谢谢