标签: draggable

我正在使用jquery ui draggable,并最终可以放置以便将图片重新排序到不同的盒子中.

当我将图片从包装盒中拖出时,一旦它离开其直接容器,它就会出现在所有其他元素下面.

谷歌搜索时,我能够找到添加:

   helper: 'clone',
   appendTo: "body"

这使得它被拖动出现在所有元素的顶部,但它仍然保留在框中的原始副本,我不希望这样.

有没有办法让我在拖动时让元素保持在一切的顶部？我尝试过高z-index无济于事.

这是一个jsfiddle,它显示了第二个背后的第一个draggle元素.反过来说这不是问题.我不能在不破坏很多其他事情的情况下更改包含div的相对位置.

http://jsfiddle.net/cBWhX/6/

我正在使用draggableScrollableSheet. 我给这些参数

DraggableScrollableSheet(initialChildSize: 0.4,maxChildSize: 1,minChildSize: 0.4,builder: (BuildContext context, ScrollController scrollController) {
            return SingleChildScrollView(controller: scrollController,
              child: Theme(
                data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
                child: Opacity(
                  opacity: 1,
                  child: IntrinsicHeight(
                      child: Column(mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(height: 10,),
                          Container(
                            margin: EdgeInsets.only(right: 300),
                            decoration: BoxDecoration(
                              border: Border(
                                top: BorderSide(
                                    color: Colors.blue,
                                    width: 3,
                                    style: BorderStyle.solid),
                              ),
                            ),
                          ),
                          Card(
                            child: Row(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Column(
                                    crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Text(
                                        S
                                            .of(context)
                                            .we_have_found_you_a_driver,
                                        style: TextStyle(
                                            color: Colors.black,
                                            fontWeight: FontWeight.bold), …

我想在单击或拖动它时将一个可拖动的框带到前面。

我事先不知道此类框的最大数量，因为我有一个按钮，当用户单击该按钮时，该按钮会创建一个新的可拖动框。

无论有多少个框，按钮都应该始终位于顶部，因此它的 z-index 应始终是最大的。

所以这些是我的问题：

1. 当用户单击某个框时，如何将其置于最前面。
2. 如何让按钮保持在前面。

我是 ReactJS 的新手。

这是我目前在 MyComponent.js 中拥有的内容

import React, { useState }  from 'react';
import Draggable from 'react-draggable';

function MyComponent() {
    const [currZIndex, setZIndex] = useState(0);

    const bringForward = () => {
        setZIndex(currZIndex + 1);
    }

    return (
        <Draggable onMouseDown={bringForward}>
            <div className="mydiv" style={{zIndex: currZIndex}}></div>
        </Draggable>
    );
}

我当前实现的问题是每个组件只知道自己的 z-index，但不知道当前最高的 z-index 是多少。每当我单击任何 div 时，z 索引就会增加，因此这使得 z 索引不必要地变大。

如果 div1 的 z-index 为 6，div2 的 z-index 为 2，我必须单击 div2 5 次，使其 z-index 变为 7，才能将 div2 …

我正在使用Carl Bauer(https://github.com/bauerca/drag-sort-listview)的优秀drag-sort-listview来实现一个支持拖动排序的列表视图.但是,我的要求是不需要列表上的拖动句柄,而是允许用户使用项目本身拖动列表项.

通过将@ id/drag属性设置为列表项本身,我已经完成了该部分的工作.但是,它具有不响应itemClick和itemLongClick事件的副作用.

有没有办法让项目点击/长按点工作而没有单独的可拖动布局？

作为参考,我的代码如下所示 -

ListView.xml:

<com.mobeta.android.dslv.DragSortListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:dslv="http://schemas.android.com/apk/res/com.myproject"
    android:id="@+id/list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    dslv:collapsed_height="1dp"
    dslv:drag_scroll_start="0.33"
    dslv:max_drag_scroll_speed="0.5" /> 

ItemView.xml:

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="@dimen/list_item_height"
  android:orientation="horizontal">
  <CheckBox 
      android:id="@+id/check_box"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:gravity="center_vertical"/>
  <TextView
    android:id="@+id/drag"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:padding="@dimen/list_padding"
    android:gravity="center_vertical" />
</LinearLayout>

Activity.java:

    DragSortListView listView = (DragSortListView) view.findViewById(R.id.list);

    listView.setOnItemLongClickListener(new OnItemLongClickListener() {
        @Override
        public boolean onItemLongClick(AdapterView<?> arg0, View arg1,
                int arg2, long arg3) {
            Toast.makeText(arg0.getContext(), ((TextView)arg1).getText(), Toast.LENGTH_SHORT).show();
            return false;
        }
    });

    listView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> listView, View itemView, int index,
                long id) { …

ExtJS 4

我希望我的Ext.Window被拖到浏览器边界之外.所以我删除了浏览器的滚动条

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only

在Firefox中它的工作正常.但是在IE中,每当我将窗口拖到外面时,它都会再次在浏览器窗口中捕捉.

I want this (case 1)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|                            |
|                            |
|                            |
|                            |
|                            |
|                            |
|                       --window----
|                       |  A |   B |
|                       -----+------
|                            |
|                            |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

A =可见部分

B =裁剪部分

But this is happening in IE8 (case 2)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|                            |
|                            |
|                            |
|                            |
|                            |
|                            |
|                  --window--|
|                  |        ||
| …

所以问题是:你怎么能这样做？我想将draggable属性更改为,"false"以便之前可拖动的元素将丢失此属性.

我会给你一个div,所以你将有一些东西可以开始:

     <div id="div1"  draggable="true" ondragstart="drag(event) "onDblClick="edit('div1')">
     </div>

对于工作中的项目,我们在JavaScript中使用Bootstrap Modal窗口.我们想让一些窗口可移动,但我们遇到了JQuery的性能问题.

$("#myModal").draggable({
    handle: ".modal-header"
});

示例 ,
来源 .
在IE9中,它按预期工作.
在Chrome中,水平拖动按预期工作,垂直拖动相当慢,但没有问题.
在Firefox中,水平拖动按预期工作,但垂直拖动非常慢.

这很奇怪,因为示例窗口没有图形化的重量,JQuery应该规范化浏览器行为.我尝试在不使用JQuery的可拖动的情况下解决这个问题,但我遇到了同样的问题.

所以我有几个问题:

• 缓慢的性能是浏览器,JQuery,Bootstrap的错误还是我的代码不是最优的？
• 为什么水平拖动和垂直拖动之间存在差异？
• 我应该找到一个解决方法,还是完全避免使用Bootstrap动态弹出窗口？

亲切的问候,Guido

我正在使用jQuery UI来创建一个可拖动的<div>.在<div>绝对定位到右下角或左上角使用CSS:

.dragbox {
    position: absolute;
    width: 140px;
    min-height: 140px; /* I need to use min-height */
    border: 3px solid black;
    padding: 10px;
}
.bottom {
    bottom: 5px; /* causes box to resize when dragged */
    right: 5px;
}
.top {
    top: 5px; /* does not cause box to resize */
    left: 5px;
}

HTML看起来像这样:

<div class="dragbox bottom">
    Bottom Box :(
</div>
<div class="dragbox top">
    Top Box :)
</div>

JavaScript是$('.dragbox').draggable();使<div>元素可拖动.左上角<div>按预期工作,但右下角 …

我正在尝试为我的反应项目构建一个拖放列表。我正在使用react-beautiful-dnd 库。但我面临这个错误：

错误：不变失败：找不到所需的上下文

我发现是可拖动组件引发了此错误

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
   Some code goes in here....
</div>
)}

<Draggable/>

然后我发现了这个github问题：https://github.com/atlassian/react-beautiful-dnd/issues/948 根据这里建议的解决方案，我添加了一个样式函数

const getStyle = (style, snapshot, backgroundColor) => {
    return {
      ...style,
      borderBottomColor: backgroundColor,
      backgroundColor: `${backgroundColor}`,
    };
  };

然后将样式添加到div中

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} style= 
{getStyle(provided.draggableProps.style, snapshot)>
   Some code goes in here....
</div>
)}
<Draggable/>

但我仍然无法解决这个问题...我能做些什么来解决这个问题？

我如何在 flutter 中创建一个可移动/可拖动的小部件，使其保持在拖动到的位置。我尝试使用可拖动的小部件，但包裹在可拖动的小部件在释放拖动后返回到原始位置。

正如您在此 GIF 中看到的，可拖动对象返回到其原始位置。如何让它留在那里