如何决定是否接受或拒绝一个jQuery可拖动到可拖放 [英] How to decide whether to accept or reject a jQuery draggable into a droppable

问题描述

我正在使用jQuery，并且存在以下问题：

在我的网站中，我有一块棋子。每个广场都是一个简单的div，背景属性显示白色或黑色。在这些广场（divs内）我已经把一个img标签引用了必须在该广场上的棋子。例如：

 < div id =a8class =squarestyle =background-image：url（' /images/background_white.png')\"> 
< img id =piece_a8class =piecesrc =/ images / rook_black.png/> 
< / div> 
  

我可以使用jQuery控制棋子的移动。每个片 -class img是可拖动的，每个 square -class div都是可拖放的。我已经拥有一个服务器端函数，如果有一组坐标，则返回VALID，否则返回INVALID。我的想法是，如果服务器返回INVALID，那么这个作品必须返回到它的原始方格，如果服务器返回VALID，那么作品必须停留在它的新方格中，删除目标方格内的所有其他作品。

我的问题是，我不知道如何在jQuery代码中强制执行此返回值。我试着把函数放在可拖动的回复属性中，并在接受和 drop droppable的函数，但我还没有找到如何让 $。get 返回false或true。

任何帮助都将得到真正的赞赏。

在此先感谢，

Léster

解决方案

Nevermind，回答。

知道，这个技巧分为两部分：

第一：在可拖动的定义中，在启动事件下，添加一个函数，位置。像这样：

  $（'item_to_drag'）。draggable（{
 start：function（）{
 $（this）.data（origPosition，$（this）.position（））; 
} 
}）; 
  

第二：在droppable定义中，在drop事件下， .get和使用一个函数来处理答案;如果您的条件不满足，请将可拖动的动画回复到原始位置。像这样：

  drop：function（event，ui）{
 $ .get（url，function（data） {
 if（data =='INVALIDO'）
 {
 ui.draggable.animate（ui.draggable.data（origPosition），slow）; 
} 
 else 
 {
 //存储新仓位，无论如何; 
} 
} 
）; 
} 
  

这样做就可以了。

部分答案来自这里：。

I'm using jQuery and I have the following problem:

In my site I have a chessboard with pieces. Every square is a simple div with the background property to show white or black. Over these squares (inside the divs) I've put an img tag referencing the piece that must be over that square. Something like:

<div id="a8" class="square" style="background-image: url('/images/background_white.png')">
<img id="piece_a8" class="piece" src="/images/rook_black.png" />
</div>

I can control the movement of the pieces using jQuery. Every piece-class img is a draggable and every square-class div is a droppable. I already have a server-side function that, given a set of coordinates, returns "VALID" if the movement is valid, and "INVALID" if otherwise. My idea is, if the server returns "INVALID", the piece must return to its origin square, and if the server returns "VALID", the piece must stay in its new square, deleting every other piece inside the target square.

My problem is, I don't know how can I enforce this return value in my jQuery code. I've tried putting functions in the revert property of the draggable, and in the accept and drop functions of the droppable, but I haven't found how to make $.get return false or true.

Any help would be really appreciated.

Thanks in advance,

Léster

解决方案

Nevermind, answered.

In case someone needs to know, the trick is in 2 parts:

First: In the draggable definition, under the start event, add a function that saves the original position. Like this:

$('item_to_drag').draggable({
    start: function(){
        $(this).data("origPosition",$(this).position());
    }
});

Second: In the droppable definition, under the drop event, do your .get and use a function to process the answer; in case your conditions are not met, animate the draggable back to its original position. Like this:

drop: function (event, ui) {
        $.get(url,function(data) {
            if (data == '"INVALIDO"')
            {
                ui.draggable.animate(ui.draggable.data("origPosition"),"slow");
            }
            else
            {
                //store new positions, whatever;
            }
        }
    );
}

That'll do the trick.

Part of the answer came from here: In jQuery, how to revert a draggable on ajax call failure? .

这篇关于如何决定是否接受或拒绝一个jQuery可拖动到可拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！