iT邦幫忙

1

有沒有好用的物件拖拉and吸附套件

  • 分享至 

  • xImage

各位前輩好~
小魯想在幫家裡做一個安排工作的工具
內容大概是:
有一個日曆 然後點擊日期的Div 可以新增工作與指派人員
新增完 日期底下會多一個Div.work物件
不過因為是想要給長輩使用,所以在操作上盡可能想做的容易些
像是工作要改日期就用拉的把Div.work 拉到別的日期底下之類的...
本來想用jquery直接刻,但想想這種功能一定會有套件才對...

但是小魯已經很久沒有寫網頁了 資訊有些跟不上

小魯也有自己google找到一些推薦像是...11个好用的jQuery拖拽拖放插件

不過此案是利用下班後哄孩子睡了之後的時間開發的 其實沒有體力一個一個試哪個好用
所以想跟各位前端大大問個路 推薦有沒有好用的Jquery拖拉功能套件 感恩 :)

nolions iT邦新手 5 級 ‧ 2018-10-18 23:21:01 檢舉
jQuery UI Sortable
https://jqueryui.com/sortable/
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
勇者鬥宅熊
iT邦新手 5 級 ‧ 2018-10-18 14:44:30
最佳解答

這個Draggable套件試試,裡面也有蠻多有趣的事件。

Demo
GitHub

看更多先前的回應...收起先前的回應...

感謝宅雄大分享 Demo看起來好炫炮

Homura iT邦高手 1 級 ‧ 2018-10-18 20:54:18 檢舉

套件看起來很炫

勇者鬥宅熊大大
想請問這個套件 要使用什麼特殊環境嗎 照著官方提供的Example 設置卻出現了 Uncaught SyntaxError: Unexpected token 的error

官方文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.2/lib/draggable.min.js"></script>
    <script>
        import { Draggable } from '@shopify/draggable';

        const draggable = new Draggable(document.querySelectorAll('ul'), {
            draggable: 'li'
        });
    </script>
</head>
<body>
</body>
</html>

因為你不是用TypeScript,所以需要加個呼叫中間指令實作範例

var draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
  draggable: 'li'
});

勇者鬥宅熊大大:
照你提供的範例修改可以運作了~ YA
再次感謝你的熱心分享 (╭ ̄3 ̄)╭♡

0

google 日曆...

哈哈哈 我也有想過用現成日曆 不過還有一些客製化的功能 像是列出某間公司有那些工地然後轉成請款單 或是 依照員工上了幾天班大概算一下薪水這樣的後台功能 所以還是要自己寫XD

那功能不像是要給長輩用的吧~
/images/emoticon/emoticon10.gif

因為家裡是傳統產業 現在長輩是用手寫筆記本來記錄工作 然後再翻筆記本來手寫請款單 跟算薪水 想說幫他們自動化一下...但他們會不會用又是另外一件事 ~"~

我要發表回答

立即登入回答