Drag-and-Drop 拖放

The ability to grab an element with the mouse, move it, and release it somewhere else is familiar in desktop applications but rarer in web browsers. This is because coding such behavior in plain JavaScript is very complicated. Fortunately, it requires only one line in symfony.在桌面应用中用鼠标将一个元素拖放到某个地方是很常见的, 但在浏览器中却极少见. 这是因为用Javascript编写这些行为是非常复杂的. 但是在symfony中却非常幸运地只要用一行就可以实现.

框架提供了两个辅助函数: draggable_element() 和drop_receiving_element(), 它们可以被看成是行为修改器(modifier), 他们将发现器(observer)和能力加给相应的元素. 用它们可以将可拖放的元素声明为可拖放的draggable或接收receiving 元素. 一个可拖放元素就是能用鼠标点击抓取的元素, 只要鼠标按钮未松开, 这个元素就可以在整个窗口中移动. 当一个可拖放元素被松开, 一个接收元素就调用一个远程函数. 表11-32显示了用一个购物车接收元素进行交互的例子.

表11-32 购物车中的可拖放元素和”放下-接收”元素
[php]
<ul id="items">
  <li id="item_1" class="food">Carrot</li>
  <?php echo draggable_element('item_1', array('revert' => true)) ?>
  <li id="item_2" class="food">Apple</li>
  <?php echo draggable_element('item_2', array('revert' => true)) ?>
  <li id="item_3" class="food">Orange</li>
  <?php echo draggable_element('item_3', array('revert' => true)) ?>
</li>
<div id="cart">
  <p>Your cart is empty</p>
  <p>Drag items here to add them to your cart</p>
</div>
<?php echo drop_receiving_element('cart', array(
  'url'        => 'cart/add',
  'accept'     => 'food',
  'update'     => 'cart',
)) ?>

无序列表中的每一项都可以被鼠标拖动并在整个窗口中移动. 鼠标松开时, 它们将返回开始的位置. 如果在’cart’元素上松开鼠标, 它就触发一个调用cart/add动作的远程函数. 这个动作根据id请求参数确定该将哪个项目放进cart元素.表11-32模拟了一次真正的购物会话: 你可以抓取所需项目放进购物车, 然后结帐.

TIP In Listing 11-32, the helpers are written just after the element they modify, but that is not a requirement. You could very well group all the draggable_element() and drop_receiving_element() helpers at the end of the template. The important thing is the first argument of the helper call, which specifies the identifier of the element to receive the behavior.在表11-32中, 辅助函数正好写在要改变的元素的后面, 但这不是必须的.你可以在模板的最后将draggable_element()和drop_receiving_element()分组列出. 重要的是不是辅助函数调用的第一个参数, 它将指明要接受行为的元素标识符.

draggable_element()辅助函数接受如下参数:
revert: 如果为真, 当释放鼠标时,元素将返回原来位置.它也可以是任意的函数指针, 用于拖动结束时调用.
ghosting: 克隆一个元素并且拖动这个复制品, 放下这个复制品之前, 原先的元素留在原来的地方不动.
snap: 如果为假, 则不会出现快照.否则,可拖动元素只能被拖拽到由xy 或 [x,y] 或function(x,y){ return [x,y] }指定的xy交叉点.

drop_receiving_element() 辅助函数接受如下参数:
accept: 描述CSS类的一个字符串或一个字符串数组. 只有当可拖放元素有一个或多个CSS类时, 才能被接受..
hoverclass: 当用户在一个元素上拖动一个被接受的可拖动元素, 则将CSS类加到这个元素上.

Sortable Lists 可排序列表

可拖动元素还提供了另一种应用,也就是通过鼠表移动项目以对一个列表进行排序. Sortable_element() 辅助函数 将可排序行为加给项目, 表11-33是实现这一特性的一个例子.

表11-33 可排序列表
[php]
<p>What do you like most?</p>
<ul id="order">
  <li id="item_1" class="sortable">Carrots</li>
  <li id="item_2" class="sortable">Apples</li>
  <li id="item_3" class="sortable">Oranges</li>
  // Nobody likes Brussel sprouts anyway
  <li id="item_4">Brussel sprouts</li>
</ul>
<div id="feedback"></div>
<?php echo sortable_element('order', array(
  'url'    => 'item/sort',
  'update' => 'feedback',
  'only'   => 'sortable';
)) ?>

借助于sortable_element() 辅助函数的神奇能力,

<

ul>元素成为可排序的, 也就是说, 它的子元素可以通过拖放被重新排序.每当用户通过拖动一个条目并释放来重新排序时,就会产生一个带有以下参数的Ajax请求:
POST /sf_sandbox/web/frontend_dev.php/item/sort HTTP/1.1
  order[]=1&order[]=3&order[]=2&_=

整个有序列表作为一个数组传送, 格式是order[$rank]=$id, $order从0开始,$id 则是 列表元素中id属性中_后的值.

sortable_element()辅助函数接受以下参数:
only: 描述CSS类的一个字符串或一个字符串数组. 只有具有这个类的可排序元素的子元素才可以被移动.
hoverclass: 当鼠标在元素上浮动时, 将CSS类加到元素上.
overlap: 如果多个条目显示在同一行, 则设为horizontal; 如果每行一个条项目(如例中所示), 则设为vertical.
tag: 如果要排序的列表不是一组
元素, 则你必须指定可排序元素中的哪些子元素是可以被拖放的(例如div 或dl).

Edit in Place 就地编辑
越来越多的互联网应用程序允许用户直接在页面中直接编辑页面内容, 而无需在表单中重新显示内容. 这种交互的原理是简单的.当用户将鼠标浮动到一块文本上时, 这块文本将被加亮. 如果用户在这个块中点击, 普通文本就转换为填写了文本的文本区, 并且出现一个保存按钮. 用户就可以在文本区中编辑, 保存之后, 文本区消失, 普通文本重新出现. 在symfony中, 用input_in_place_editor_tag() 辅助函数就可以将这个可编辑行为加给一个元素. 表11-34显示了这个辅助函数的使用.
表11-34 可编辑的文本

复制内容到剪贴板

代码:

[php]
<div id="edit_me">You can edit this text</div>
<?php echo input_in_place_editor_tag('edit_me', 'mymodule/myaction', array(
  'cols'        => 40,
  'rows'        => 10,
)) ?>

当用户点击可编辑文本时, 它就被替换为一个填写了文本的文本输入区,这个输入区是可编辑的. 当提交表单时, 在将编辑后的值作为value参数的Ajax中就会调用mymodule/myaction动作, 动作的结果就是更新可编辑元素. 写这样的代码非常快而且很有用.
input_in_place_editor_tag()辅助函数接受如下参数:
cols and rows: 用于编辑的文本输入区的大小(如果rows大于1, 就成为<textarea>).
loadTextURL: 一个被调用于显示要编辑的文本的动作的URL.如果可编辑元素的内容使用特殊的格式并且你想让用户不用格式化就可以编辑该文本时, 这个参数非常有用.
save_text and cancel_text: 在保存链接(默认值是ok)和取消链接(默认值是cancel)上的文本. .

小结
如果你不喜欢在你的模板中用JAVASCRIPT来实现客户端的行为, 你可以用Javascript辅助函数. 它们不仅能自动实现基本的链接和元素更新, 还能快速地提供一种开发AJAX交互的方法. PROTOTYPE有效地改进了语法,而script.aculo.us则提供了强大的视觉效果, 在这两者的帮助下, 只需要几行代码就可以写出复杂的交互程序.
因为通过symfony可以象写静态页面那样容易地生成高度交互性的应用, 你可以考虑将大多数桌面应用程序的交互功能都在web应用中实现.

<希望对大家有用，谢谢。。。>