标签: draggable

jQuery拖放问题:mousemove事件没有绑定某些元素

使用Google托管的最新jQuery/UI.我有以下标记:

<ul id="tree">
    <li><a href="1/">One</a></li>
<li><a href="2/">Two</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

以下javascript:

$(document).ready(function(){

    // Droppable callbacks
function dragOver(overEvent, ui_object) {
    $(this).mousemove(function(moveEvent){
        console.log("moved over", this);
    });
}

function drop_deactivate() {
    $(this).unbind();
}

function drag_out() {
    $(this).unbind();
}

// Actual dragging
$("#treeContainer li").draggable({
    revert: true,
    revertDuration: 0
});

// Actuall dropping
$("a").droppable({
    tolerance: "pointer",
    over: dragOver,
    deactivate: drop_deactivate,
    out: drag_out
});
Run Code Online (Sandbox Code Playgroud)

});

如果我将第一个li向下拖过第二个,则会触发mousemove函数(并且firebug会记录输出).但是如果我将第二个拖动到第li一个上面,则mousemove函数不会触发.你可以看到这个http://jsbin.com/ivala.是否有一个原因?我应该以其他方式捕获mousemove事件吗?

编辑:似乎认为mousemove()事件对于早期元素的绑定不是当前被拖动的元素(应该在鼠标悬停时绑定).

jquery drag-and-drop jquery-ui droppable draggable

2
推荐指数
1
解决办法
3913
查看次数

jQuery将元素拖动到可初始状态为隐藏的可排序列表中

我似乎无法将元素拖动到可初始状态为隐藏的可排序列表(即display:none).

每行的html如下所示:

<div class="dragbox" id="item1" >
  <h2>Expression 1<span id="exp1"></span></h2>
  <div class="dragbox-content" >
    <ul class="dragrow1"></ul>
    <ul class="dragrow2"></ul>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

但是为了使一个字段能够被放入'dragrow*',div'dragbox-content'必须具有'display:block'的样式.这可以用主css样式编写,也可以硬编码到div本身(例如).

麻烦的是,在页面加载时,你有点想要关闭所有行(或者至少除了一行之外).这意味着'display'应该最初设置为'none'.这部分很容易.一些jQuery可以在ready()事件中的页面加载时更改此css:

$('.dragbox')
.each(function(){
  $(this).find('.dragbox-content').hide();
});
Run Code Online (Sandbox Code Playgroud)

还有一个名为"toggle"的jQuery命令,当你单击h2标签时,会自动在block&none之间交换这个css显示.所以我可以显示或隐藏每一行.

因此......如果在ready()事件中显示了一行(display:block),则可以将项目拖动到可排序列表中(即使您在显示和隐藏行之间切换).

但是......如果在ready()事件中隐藏了一行(display:none),则无法将项目拖动到可排序列表中.

有任何想法吗?真的卡在这一个......

css jquery draggable jquery-ui-sortable

2
推荐指数
1
解决办法
2241
查看次数

jQuery draggable('cancel')导致错误:this.helper为null

我有一个jQuery draggable()滑块,我想在某个事件中取消,但这会导致错误:'this.helper为null'.代码很简单:

$( '#magicalscrollhandle' ).draggable( 'cancel' );
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

jquery jquery-ui draggable

2
推荐指数
1
解决办法
1935
查看次数

如何为UIImageView实现对齐网格功能?

我有一个可拖动的视图,我已使用以下代码设置:

#import <UIKit/UIKit.h>

@interface DraggableView : UIImageView {

    CGPoint startLocation;
}

@end

#import "DraggableView.h"

@implementation DraggableView

- (id) initWithImage: (UIImage *) anImage
{
    if (self = [super initWithImage:anImage])
        self.userInteractionEnabled = YES;
    return self;
}

- (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
    // Calculate and store offset, and pop view into front if needed
    CGPoint pt = [[touches anyObject] locationInView:self];
    startLocation = pt;
    [[self superview] bringSubviewToFront:self];
}

- (void) touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event
{
    // Calculate offset
    CGPoint pt = [[touches anyObject] locationInView:self];
    float dx …
Run Code Online (Sandbox Code Playgroud)

objective-c draggable uiimageview ios4

2
推荐指数
1
解决办法
4782
查看次数

将javascript函数应用于可拖动副本

我想应用一个名为copie_contenue的函数来改变我在拖动原始文件后创建的副本上的div父ID,但是我的脚本更改了原始文件而不是副本我也尝试了ui.helper代替这个但没有发生任何事情

    $('#model_1').draggable({
    connectToSortable:'#global_div',
    addClasses: false,
    helper:'clone', 
    stop: function(e,ui) {
        $(this).replaceWith(copie_contenue("model_1"));
    }
    })
Run Code Online (Sandbox Code Playgroud)

jquery clone jquery-ui draggable

2
推荐指数
1
解决办法
830
查看次数

如何使用拖动功能干净地调整iFrame的大小?

我有一个iFrame,我希望用户能够抓住它的一面并拖动它来调整它的大小.我不希望它实时调整大小,而是使用指标行,当用户发布时,它会调整大小.

我正在使用jQuery.

有帮助吗?

jquery draggable

2
推荐指数
2
解决办法
4706
查看次数

可拖动的Div,里面有textarea.拖动问题

我有一个带有textarea的div.主div是可拖动的并且工作正常,但我无法在单击其中的textarea时拖动div.有没有办法拖动div即使我从div中的textarea拖动它?

这是我如何使我的div可拖动

$('.speech_bubble').draggable(
{
      containment: $('#dropHere')

});
Run Code Online (Sandbox Code Playgroud)

谢谢

jquery textarea draggable

2
推荐指数
1
解决办法
1984
查看次数

jQuery Mobile Iphone应用程序

我正在尝试为iPhone创建一个HTML5 Web应用程序.我正在使用jQuery Mobile.我的应用程序涉及画布.它就像一个使用画布渲染草图的绘图应用程序.用户可以从任何方向在屏幕上滑动,应用程序应该能够找出位置,然后在点上画线.

jQuery Mobile仅为滑动控件提供以下一些基本事件,但我认为我需要对滑动进行更多控制,因为用户可以在任何方向滑动,并且可以是任何像素长.另一方面,我应该能够捕获大部分点,这样我就可以更清晰,更准确地想象绘图.

tap
Triggers after a quick, complete touch event.
taphold
Triggers after a held complete touch event (close to one second).
swipe
Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.
swipeleft
Triggers when a swipe event occurred moving in the left direction.
swiperight
Triggers when a swipe event occurred moving in the right direction.
Run Code Online (Sandbox Code Playgroud)

我是否应该在画布中为iOs应用程序创建绘图应用程序?任何帮助将不胜感激.

jquery html5 draggable ios jquery-mobile

2
推荐指数
1
解决办法
2968
查看次数

为可放置项添加唯一ID

我有一个小部件,我可以将物品放入垃圾桶.我希望能够在drop事件中为垃圾桶中丢弃的每个项目添加唯一ID.我怎么能这样做,有没有办法让输出值成为列表项的实际名称?谢谢!以下是我的代码:

    $(function() {
    var $gallery = $( "#gallery" ),
        $trash = $( "#trash" );


    $( "li", $gallery ).draggable({
        cancel: "a.ui-icon", 
        revert: "invalid", 
        containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
        helper: "clone",
        cursor: "move"
    });


    $trash.droppable({
        accept: "#gallery > li",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
            deleteImage( ui.draggable );
        }
    });

    $gallery.droppable({
        accept: "#trash li",
        activeClass: "custom-state-active",
        drop: function( event, ui ) {
            recycleImage( ui.draggable );
        }
    });
Run Code Online (Sandbox Code Playgroud)

HTML

 <div class="demo ui-widget …
Run Code Online (Sandbox Code Playgroud)

jquery unique droppable draggable unique-id

2
推荐指数
1
解决办法
1234
查看次数

在Flutter中输入DragTarget时如何更新Draggable子级?

我有许多Draggables和DragTargets。在Draggable上,我指定了childfeedback,但是我也希望它更改当Draggable进入DragTarget时的外观。我看不到任何办法。

每当我拖动Draggable时,我都会将其颜色更改为红色,但是,一旦它进入DragTarget,我就想将Draggable颜色更新为绿色。

我知道DragTarget.OnWillAccept,只要Draggable进入DragTarget就会调用此方法,但是我只有data。我尝试用新颜色更新数据,然后调用setState,但这似乎不起作用。

关于如何获得这种行为的任何建议?

我想要类似以下回调Draggable.onEnteringDragTarget和的内容Draggable.onLeavingDragTarget

drag-and-drop draggable flutter flutter-layout

2
推荐指数
1
解决办法
1066
查看次数