标签: draggable

我有一些拖放代码,它可以正常工作.只是有一点询问.我发现,如果我调试目的降函数中添加一个通知(如警报(draggedItem.text());),它触发警报两次当我把东西放到可拖动区域.我在另一篇文章中读到,使用droppable和sortable一起导致这个奇怪的双重事件发生.但我需要使用droppable事件来获取拖动的项目对象(ui.draggable) - 这样我就可以在删除它时操作它.如果有任何其他方式获得可拖动对象,请告诉我:)如果你有解释为什么会发生这种情况,那将是有趣的...

$(".field > li").draggable({
    helper:'clone',
    opacity: 0.4,
    connectToSortable:'.dragrow'
});

$(".dragrow").droppable({
    drop: function(e, ui) {
        draggedItem = ui.draggable;
        //alert(draggedItem.text());
    }
}).sortable({ //code here to do stuff with 'draggedItem'

我还有另一个与此相关的查询,但由于我的代码很大,我无法在这里发布完整的内容.所以我明白,如果你无法提供帮助 - 只要有些事情让人想起来真的很酷.基本上我有一个'块'列表,我可以拖动到多行.可以使用toggle事件隐藏各个行.如果我有3行,我可以将块拖动到其中任何一行.如果我然后隐藏第一个,我现在无法拖入另外两行.我仍然可以对它们进行排序.一旦我开始对它们进行排序,我就可以再次拖入它们.奇怪的...

第一个问题,所以要善良:)

我想要做的是在用户释放draggable时,以及在还原动画完成之前调用函数.

据我所知,只有在还原完成后才会调用stop事件.我已经尝试将函数传递给draggable的revert选项,但它似乎不起作用.这是我的一些代码来展示;

$("a").draggable({
    helper:function(){
        return $("<div/>",{id:"mydrag",text:"link"}).appendTo("body");
    },
    revert:function(evt,ui){
        // $("#mydrag").fadeOut("slow");
        return true;
    },
    stop:function(evt,ui){
        console.log("fin");
    }
});

如果我取消注释恢复函数的第一行 - 淡出 - 则元素淡出但不会恢复.当还原动画完成时,控制台仅记录"fin".

谁能帮我？毋庸置疑,我已经谷歌搜索了很多答案,但没有运气.

巴斯特

我通常不会提出这样的问题/答案,但我认为我会这样做,因为我已经看过这个问题20多次了,而且没有一个答案确实有效.简而言之,问题是如果你有可滚动的内容(overflow: auto;在可拖动的jQuery项目内的任何地方,当你单击并拖动滚动条时,父可拖动容器随之拖动.所以,我花了一些时间来编写解决方案.

这是一个会出现此问题的html示例:

<div class="draggable" style="width:100px;height:100px;">
  <div id="content" style="width:80px;height:80px;overflow:auto;">
    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  </div>
</div>

将元素初始化为可拖动的典型方法是这样的:

$(".draggable").draggable()

我正在尝试创建一个网页,允许用户将图像拖放到Microsoft Office应用程序,特别是Powerpoint.

默认情况下(从FF3.5开始),Firefox将在删除图像时插入源URL而不是图像本身.添加以下Javascript/jQuery代码(源自https://developer.mozilla.org/En/DragDrop/Drag_Operations)后,

$('img').attr('draggable', true).bind('dragstart', function (event) {
    event.originalEvent.dataTransfer.effectAllowed = 'copy';
});

拖放工作从Firefox到Word和Excel,但不是PowerPoint.有关所发生情况的示例,请参阅http://slides.html5rocks.com/#drag-and-drop.我用FF3.6和FF9测试了这个.

如何使用PowerPoint？

我使用jQuery ui draggable但选项appendTo不起作用.但是其他选项如遏制或网格正常工作.这是代码:

HTML

<div id="demo">
</div>
<div id="sidebar">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div> 
</div>

脚本

jQuery(".item").draggable({ appendTo: "#demo", grid: [ 10, 10 ], containment: "#demo" });

CSS

#demo {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    float: left;
}
#draggable {
    background: red;
    width: 50px;
    height: 50px;
}
#sidebar {
    float: left;
    width: 300px;
}
.item {
    cursor: pointer;
    background: black;
    width: 100px;
    height: 100px;
    margin: 10px;
}

这是一个现场演示:http: …

我正试图在滚动窗口中居中一个模态对话框.此模态是绝对位置,因为必须在屏幕中可拖动.我使用这个插件进行可拖动功能:

http://threedubmedia.com/code/event/drag

我的问题是,如果我放置顶部,这个模态的位置绝对:50%它在中心窗口显示模态但不考虑所有滚动窗口.

我有一个我无法解决的情况,希望我会得到你的一些建议.

情况很简单:我有一个LinearLayout,其中我有一个带有多行文本的TextView.用户可以拖动TextView,直到找到他喜欢的位置.真正重要的是TextView可以部分地脱离LinearLayout(它将显示为cut).

以下是一些代码示例:

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:clipChildren="false"
        android:gravity="center_horizontal|center_vertical"
        android:orientation="vertical" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@color/text_color"
            android:textSize="16sp" />
    </LinearLayout>

如您所见,LinearLayout具有clipChildren = false以允许截断文本.对于textview,我设置了一个触摸监听器

txt.setOnTouchListener(new View.OnTouchListener() {
            int initialX = 0;
            int initialY = 0;

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getActionMasked()) {
                case MotionEvent.ACTION_DOWN:
                    initialX = (int) event.getX();
                    initialY = (int) event.getY();
                    break;
                case MotionEvent.ACTION_MOVE:
                            int currentX = (int) event.getX();
                            int currentY = (int) event.getY();
                            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) txt.getLayoutParams();

                            int left = lp.leftMargin + (currentX - initialX); …

使用'draggable'html5属性时,如何保留拖动的A元素的外观.在某些浏览器(Safari和Chrome)上拖动锚点时,拖动的帮助器将被替换为拖动元素的浏览器本机实现,如屏幕截图所示:

拖动DIV时

拖动A时

HTML

<div class="draggable">Draggable DIV</div>
<a href="" class="draggable">Draggable A</a>

CSS

$('.draggable').attr('draggable', true);

这是我组装的快速JSBin来演示这个问题http://jsbin.com/pihayeceza/1/edit

谢谢

正如您在下面的视频中看到的那样,当鼠标位于事件容器之外时,当鼠标向上移动时它仍然向上滚动到向上,当鼠标移动到底部时它仍然向下滚动.

我需要在下面的演示中实现相同的功能.但现在它看起来如下.你可以看到滚动是丑陋的.

请帮我.如何在我的演示日历的谷歌日历中实现滚动？

我正在使用jQuery UI的可拖动功能使用set grid选项.我的网格设置为使用[x: 130, y: 110]约束,网格的容器是一个溢出其父级的高度,允许我滚动.当我有一个可拖动的元素,然后我开始拖动它,并在容器中向下滚动(同时仍然挂在可拖动的元素上),元素不再粘在网格上.

我做了一个显示错误的准系统示例:您可以在这里看到JSFiddle中的错误 - 尝试开始拖动,并在容器中滚动.如果这还不够解释; 在这里看到错误的GIF (它应该留在网格的左上角).

我已经尝试将网格更改为a [x: 100, y: 100],这使它在Chrome和Opera中工作,因为它们在每个滚动上滚动了100个像素,而不是Firefox和IE,因为它们使用软滚动.我也试过"黑客"我的方式,并通过jQuery UI完成拖动时将元素移动到最近的网格的中心droppable,但这似乎不是一个可用的解决方案.

有没有办法确保即使您在拖动时向下滚动,可拖动元素仍会继续粘在网格上？