标签: drag-and-drop

我们如何获得droppable元素的id,当丢弃一个项目时？在这里我使用jquery ui和asp.net mvc.

 <table id="droppable">
    <tr>
    <td style="width:300px;height:50px">Backlog</td>
    <td style="width:300px;height:50px">Ready</td>
    <td style="width:300px;height:50px">Working</td>
    <td style="width:300px;height:50px">Complete</td>
    <td style="width:300px;height:50px">Archive</td>
    </tr>
        <tr id="cart">
        <td id="BackLog" class="drag"  style="width:120px;height:50px;">

         <img class="draggable" id="1234" src="../../Content/themes/base/images/ui-icons_222222_256x240.png" />

        </td>
            <td id="Ready"  class="drag"  style="width:140px;height:50px">


            </td>
            <td id="Working" class="drag"  style="width:140px;height:50px">

            </td>
            <td id="Complete" class="drag" style="width:140px;height:50px">


            </td>
            <td id="Archive" class="drag" style="width:140px;height:50px">

            </td>
        </tr>
    }
   </table> 

在这里,我想将Ist列中的图像移动到其他列,并获取该列的ID.对于拖放我使用脚本

<script type="text/javascript">
    $(function () {
        $(".draggable").draggable({ containment: '#imageboundary', axis: "x" });
        $("#droppable").droppable({
            drop: function (event, ui) {                                      
                $.ajax({
                    type: "POST",
                    url: '/Project/AddToPhase/' + $(ui.draggable).attr("id") ,
                    success: function …

我有一个应用程序,其中包含经常更改的长列表,我需要该列表中的项目可拖动.

我一直在使用jQuery UI draggable插件,但添加到400多个列表项很慢,每次添加新列表项时都必须重新添加.

有没有人知道一个类似于使用jQuery 1.3 .live()事件的jQuery UI draggable插件的插件？这将解决这两个问题.

我想知道如何在拖动(dragover/dragenter)图标/光标期间更改,例如,当我使用degen或允许部分时.当然,我可以用光标移动绝对定位的DOM的一部分,但我对本机HTML5解决方案感兴趣.

谢谢!

我正在使用$.special.event.drag和$.special.event.dropjQuery 逆向工程facebook的uiTokenizer ,因为jQuery UI的可排序/可拖动很重且很慢.

我认为我的问题与决定何时注入占位符元素的容差数学有关.

自从我第一次编写代码以来,我已经清理了很多代码,但前提仍然存在并应该适用于这个问题.

这是代码和逻辑:http: //jsfiddle.net/JoshuaIRL/kf9Qt/进行测试.

我需要有人看的区域是$ .drop函数的"容差"区域,如果你找到它的话.

 $.drop({
      mode:'intersect',
       tolerance: function( event, proxy, target ){
           var testV = event.pageY > ( target.top + target.height / 2 );

           $.data(target.elem, "drop+reorder", testV ? "insertAfter" : "insertBefore" );    
           return this.contains( target, [ event.pageX, event.pageY ] );
       }
 });

当你的实际光标碰到另一个元素时,Facebook似乎会做一个"insertAfter".

我在想这也可能是它的核心:

if ( drop && $(drop).is('.uiToken') && ( drop != dd.current || method != dd.method ) ){    
      $( this )[ method ]( drop ); …

考虑一下这个JSFiddle.它在Firefox(14.0.1)中工作正常,但在Windows(7)和OS X(10.8)上的Chrome(21.0.1180.75),Safari(？)和Opera(12.01？)都失败了.据我所知,问题在于对象上的setData()或者getData()方法dataTransfer.这是JSFiddle的相关代码.

var dragStartHandler = function (e) {
    e.originalEvent.dataTransfer.effectAllowed = "move";
    e.originalEvent.dataTransfer.setData("text/plain", this.id);
};

var dragEnterHandler = function (e) {
    //  dataTransferValue is a global variable declared higher up.
    //  No, I don't want to hear about why global variables are evil,
    //  that's not my issue.
    dataTransferValue = e.originalEvent.dataTransfer.getData("text/plain");

    console.log(dataTransferValue);
};

据我所知,这应该可以正常工作,如果你在拖动项目的同时查看控制台,你会看到写出的id,这意味着它正好找到了元素并抓住了它的id属性.问题是,它是不是设置数据还是没有获取数据？

我很欣赏这些建议,因为经过一周的努力,经过三次尝试和200多个版本,我开始放松心情.我所知道的是它曾经在60左右的版本中工作,而且具体的代码根本没有改变......

实际上,6X和124之间的主要区别之一是我将事件绑定从更改live()为on().我不认为这是问题所在,但是在谈到DnD时,我已经看到Chrome出现了几次失败.这已经被揭穿了.事件绑定方法对此问题没有影响.

UPDATE

我已经创建了一个新的JSFiddle,它完全消除了所有内容,只留下了事件绑定和处理程序.我用jQuery 1.7.2和1.8既测试了它on()和live().问题持续存在,因此我删除了一个级别并删除了所有框架并使用了纯JavaScript.这个问题仍然 …

我希望能够走动(在变灰的背景下,通过拖放)由引导2.提供的模态形式谁能告诉我什么实现,这是最好的做法呢？

Bauerca drag-sort-listview是列表视图中拖动功能的一个很棒的库.. https://github.com/bauerca/drag-sort-listview

但我的问题是演示项目非常复杂,我无法跟踪它以包含我的项目中的功能..

任何简单的例子将不胜感激..

例如,我只需要一个包含此自定义列表的屏幕,其中包含三个项目..或任何其他简单示例..

谢谢

我想要实现的目标:拥有一个带有GridLayoutManager的RecyclerView,它支持drag'n'drop并在拖动时重新排列项目.

旁注:第一次用拖放开发任何东西.

有很多关于如何使用的ListView来实现这一功能的主题,例如:https://raw.githubusercontent.com/btownrippleman/FurthestProgress/master/FurthestProgress/src/com/anappforthat/android/languagelineup/DynamicListView.java

然而,通常的例子是很多的代码,创建拖累视图的位图和感觉应该可以使用来实现相同的结果View.startDrag(...),并与RecyclerView notifyItemAdded(),notifyItemMoved()而且notifyItemRemoved()因为它们提供了重新排列动画.

所以我玩了一些并想出了这个:

final CardAdapter adapter = new CardAdapter(list);
adapter.setHasStableIds(true);
adapter.setListener(new CardAdapter.OnLongClickListener() {
    @Override
    public void onLongClick(View view) {
        ClipData data = ClipData.newPlainText("","");
        View.DragShadowBuilder builder = new View.DragShadowBuilder(view);
        final int pos = mRecyclerView.getChildAdapterPosition(view);
        final Goal item = list.remove(pos);

        mRecyclerView.setOnDragListener(new View.OnDragListener() {
            int prevPos = pos;

            @Override
            public boolean onDrag(View view, DragEvent dragEvent) {
                final int action = dragEvent.getAction();
                switch(action) {
                    case DragEvent.ACTION_DRAG_LOCATION:
                        View onTopOf = mRecyclerView.findChildViewUnder(dragEvent.getX(), dragEvent.getY());
                        int i …

使用jQuery拖放后如何获取坐标位置？我想将坐标保存到数据库中,以便下次访问时,该项目将处于该位置.例如,x:520px,y:300px？

编辑:

我是PHP和mysql程序员:)

那里有没有教程？

我正在尝试从桌面浏览器窗口实现拖放文件.我使用jQuery将三个事件附加到HTML元素,如下面的代码所示:

$("html").on("dragover", function() {
    $(this).addClass('dragging');
});

$("html").on("dragleave", function() {
    $(this).removeClass('dragging');
});

$("html").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});

'dragover'和'dragleave'事件工作得很好,当我将文件拖到删除它上时,如果我再次拖出文件,则会在整个页面周围显示插入边框.

但是,'drop'事件似乎根本没有触发,删除的文件只是在浏览器窗口中打开.

有谁知道为什么这个事件没有解雇？

顺便说一句,我在最新版本的Chrome中使用jQuery 1.10.2进行测试.