Question

我在使用jQuery UI Sortable时遇到了一些麻烦。我正在尝试制定每日时间表，因此您可以在一天中完成每个小时，以及可以移动的任务。

以下是我到目前为止的实例：plantoday.lukeseager.com

如您所见，您可以对项目进行排序。但是......如果你试图将任务4从06:00移动到04:00，它会将任务3向下移动一步到06:00，这显然不需要，因为04:00是空白的，不应该影响其他任务。

我有一种感觉，我可以使用sort选项，检查项目是否为空，以及是否以某种方式停止排序以移动其他任务。但我真的不确定如何解决这个问题。

这是我到目前为止的代码：

$('.tasks').sortable({
    revert: true,
    handle: '.content',
    cancel: '.blank'
});

我的HTML结构非常简单：

<ol class="tasks">
    <li class="task">
        <div class="content">
            <h4>Some task</h4>
            <p>A description for task</p>
        </div>
    </li>
    <li class="task">
        <div class="content">
            <h4>Some task 2</h4>
            <p>A description for task 2</p>
        </div>
    </li>
    <li class="task blank"></li>
    <li class="task blank"></li>
    // etc...
</ol>

任何帮助将不胜感激！

Answer 1

正如我已经说过的，你需要实现draggable和droppable的组合来实现你想要的。

感谢这篇文章： jQuery sortable with droppable

public class HomeController {

    @Autowired private SongImpl songDao;
    @RequestMapping(value="/", method=RequestMethod.GET)
    public ModelAndView welcomePageBeforeLogin(HttpServletRequest request, HttpServletResponse response,HttpSession session){
        ModelAndView model = new ModelAndView();
        List<String> album = songDao.getAllAlbums();
        model.addObject("albumsize",album.size());
        model.setViewName("hello");
        return model;
    }
}

我已在上述帖子中提供了解决方案（已接受的答案），请参阅DEMO

jQuery UI可排序以识别空的可排序容器

1 个答案: