小编Mat*_*t D的帖子

结合AngularJS,jQueryUI,Angular-Drag-Drop进行排序列表

我有以下情况需要允许用户从列表中选择对象并将其拖放到某个插槽中:

在此输入图像描述

对象可以是插槽大小的一到三倍.因此,如果用户将对象1拖动到插槽0,则它仅占用插槽0(startSlot = 0和endSlot = 0).但是,如果用户将对象3拖动到插槽3,则它占用插槽3,4和5(startSlot = 3和endSlot = 5).

将对象放入插槽后,用户可以通过在插槽中上下单击并拖动对象来重新排序对象.对象不能相互重叠:

在此输入图像描述

我正在使用Angular,所以我正在从数据库中读取对象列表,并且我有一个插槽数量的变量.我尝试了几种解决方案.我相信使用jQuery和jQueryUI draggable,droppable和sortable是解决方案的一部分,这里是第一个展示拖放和可排序的小提琴:

http://jsfiddle.net/mduvall216/6hfuzvws/4/
Run Code Online (Sandbox Code Playgroud)

这个小提琴的问题是我需要一定数量的插槽.将对象放入插槽后,它会根据对象的大小替换1到3个插槽.下面的第二个小提琴集成了AngularJS:

http://jsfiddle.net/mduvall216/zg5x4b6k/4/
Run Code Online (Sandbox Code Playgroud)

这里的问题是我知道我需要某种类型的网格来捕捉从对象列表拖动的对象.我正在寻找的结果是在其指定的插槽中的json对象列表:

[{ID:OBJ1,startSlot:0,endSlot:0},{ID:OBJ3,startSlot:3,endSlot:5}]

我也确定解决方案需要codf0rmer的Angular Drag-Drop位于此处:

https://github.com/codef0rmer/angular-dragdrop
Run Code Online (Sandbox Code Playgroud)

但是我在尝试将它集成到我的小提琴中进行测试时遇到了问题.这是一个有趣的挑战,我已经旋转了一段时间,如果有人可以提供帮助,我将不胜感激.谢谢你的时间.

javascript jquery drag-and-drop jquery-ui angularjs

5
推荐指数
1
解决办法
699
查看次数

在Rails中,如何从视图中的表单调用控制器中的特定方法?

新的铁路所以请耐心等待.我想做的是,我在屏幕上有一个消息列表.我希望将消息标记为"已关闭",这意味着它只需填写一个完整的日期.

我有一个模特:

class Message < ActiveRecord::Base
  attr_accessible :topic, :body, :completeDate, :created_at
  belongs_to :account
  belongs_to :user
  has_many :message_followups
end
Run Code Online (Sandbox Code Playgroud)

我有一个控制器:

class MessagesController < ApplicationController
def close
   @message = Message.find(params[:messageId])
   @message.completeDate = Date.today
   if @message.save
    redirect_to myHomeMessages_path, :flash => { :success => "Your message was closed." }
   else
    redirect_to myHomeMessages_path, :flash => { :error => "Error closing message." }
   end
end
end
Run Code Online (Sandbox Code Playgroud)

我有一个观点:

<%= form_for (???) do |f| %>
    Are you sure you wish to close this message?<br>
    <%= hidden_field_tag 'messageId', message.id.to_s …
Run Code Online (Sandbox Code Playgroud)

controller model ruby-on-rails view

2
推荐指数
1
解决办法
8821
查看次数