标签: draggable

我正在使用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) { …

我正在使用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>按预期工作,但右下角 …

我正在我的应用程序中实现一项功能,允许用户在地图上手动定位自己.所以我用一个引脚来表示它们的位置,让用户将它拖到它们当前所在的位置.简单的解决方案是setDraggable(true)在标记上使用,但这需要用户将标记保持3或5秒直到它可拖动.我认为这对许多用户来说使用该功能非常困惑.因此,我想要的是通过让用户立即拖动它们而不必暂时保持拖动来使拖动更具响应性 - 就像Foursquare的做法一样!

我该怎么做才能实现自己的拖动功能？如果您有任何建议,请帮助我,谢谢.

情况:

大家好!在我的应用程序中,我有一种看板:有一些列,每列都包含一个项目列表.

我需要在列之间拖放项目并在同一列内重新排序.

我之前尝试过三个与拖放相关的角度模块(前两个)和重新排序(第三个):

ngDraggable:https://github.com/fatlinesofcode/ngDraggable

Angular dragdrop:https://github.com/codef0rmer/angular-dragdrop

Angular ui-sortable:https://github.com/angular-ui/ui-sortable

它们很好,文档很好,但似乎不可能同时拖放和重新排序.然后我找到另一个模块:

ng-sortable:https://github.com/a5hik/ng-sortable

这似乎正是我所需要的.但文档并不那么清楚.我无法理解如何设置它.

题:

你能告诉我怎么设置它吗？有一个有良好而清晰的例子的掠夺者？

谢谢!

http://jsfiddle.net/ujty083a/4/

  $(document).ready(function(){
        $(".left ul li").draggable({
            refreshPosition: true,
            revert: true
        });

        $(".right li").droppable({
            drop:   function(e, ui){
                alert(ui.draggable.text()+" "+$(this).text());
            }
        });

    });

我有三个列表,你可以拖动,另外两个接受drop.右侧列表可能有也可能没有滚动条,但总会有2个或更多.

我发现的第一个问题是当顶部列表有滚动条并且您尝试删除第二个列表中的项目时会触发两个事件.一个用于隐藏列表,一个用于可见列表.

第二个问题是,当其中一个列表具有滚动条时,当用户将项目拖入其中时,它不会自动滚动.

我想对两个区域进行垂直可拖动的划分,如下所示.

我只是想修改一个可拖动div 的在线示例,这是我想要的.最后,我得到了这个.有人可以给我一些修改它的提示吗？

JSFiddle链接:https://jsfiddle.net/casperhongkong/omekvtka/14/

HTML

<div class="container">
  <div class="area1">
Area 1
  </div>
  <div class="drag">

  </div>
  <div class="area2">
Area 2
  </div>
</div>

CSS

.container {
  position: fixed;
  top: 51px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #272822;
  border: 1px solid #222;
 // margin: 0 auto;
  //display: inline-block;
}

.area1 {
  position: absolute;
  height: 100%;
  width: 30%;
  background-color: #ddd;
  display: inline-block;
}

.drag {
  position: fixed;

  width: 5px;
  height: 100%;
  background-color: #444;
  display: inline-block;
}

.area2 …

我有一个包含不同行和字段的表.在一行中我有两个字段,display:none;当我拖动这些行时,有一个效果,如横向填充<tbody>和<thead>,表没有收缩,表的元素是.

在第一行中的下一个JsFiddle无法正常工作,但在第二行中只有一个字段display:none;可以正常工作.

如果有任何问题请问.

错误的例子

拖动时表:

起初我以为可以通过查找<td>具有类的类的数量.hidden-td(具有a的类display: none;)并查找具有类的元素.placeholder-style(具有<tr>在执行拖动时生成的类)并且添加许多来解决它<td>因为<tr>我正在移动,但不是,不起作用.

我知道.hidden-td这条线有多少字段

var numcells = $('.hidden-td').length;

问题

我在第一行中有9个元素,在另一个中我有8个.在我的函数中start()我只在我的占位符中隐藏了一列,所以当我拖动第一行时,剩下一列没有应用类.hidden-td,这就是为什么有一个列末尾的空格.

我怎样才能解决这个问题？

https://jsfiddle.net/w52m5ggb/20/

我正在努力使拖放也可以排序.我可以从div 1拖到2,从div 2拖到div 1,但因为我使用clone我无法进行排序工作.

有任何想法吗？

$(document).ready(function() {

    $("#qselected").sortable();
    $("#qselected").disableSelection();

    $(".qitem").draggable({
        containment : "#container",
        helper : 'clone',
        revert : 'invalid'
    });

    $("#qselected, #qlist").droppable({
        hoverClass : 'ui-state-highlight',
        drop : function(ev, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();

            $(".qitem").draggable({
                containment : "#container",
                helper : 'clone',
                revert : 'invalid'
            });
        }
    });
});

现场演示:http://jsfiddle.net/6xXPq/4/

我有一些可用于可拖动元素的数据。我想在 onDragEnd 上使用该数据，但我没有找到传递任何可拖动数据的方法，除了在 onDragEnd 事件中draggableId传递到 的数据result。

基本上我需要的是可拖动对象上的某种自定义道具，它将显示在 DragDropContext 事件中。就像是：

<>
   {cmps.map(cmp => (
       <Draggable 
           key={cmp.name}
           draggableId={cmp.name}
           index={index}
           // this is what im missing
           payload={cmp}
           // -----------------------
        >
          <Cmp/>
        </Draggable>
    )}
</>

我有一个像这样的div，但是当我拖动这个div时，光标会自动变为那个disabled。我怎样才能解决这个问题？

div {
  background-color: red;
  width: 10px;
  height: 10px;
  cursor: e-resize;
}

<div draggable="true"></div>

div 必须包含该draggable属性，因为我需要它用于其他用途。