前端图片拖拽功能实现

转发地址：

1、图片拖拽原地址

2、图片拖拽原地址

3、图片拖拽原地址

 

上述转载三个拖拽方式可以借鉴一下，其主要思想就是：

1、图片随鼠标移动而动；

2、判断鼠标移动后是否在图片范围，并将距离最近的图片与拖动图进行index的交换；

3、如果排序的话有很多方式，可以在标签初始化的时候添加index属性，在交换的时候将index属性值交换，最终取index值进行排序；

 

新增：如下是css中content属性图标，css样式如：

.icon:after {
    content: '\f005';
    font-family: FontAwesome;
}

Font Awesome图标

NAME	CODE	NAME	CODE	NAME	CODE	NAME	CODE
.fa-glass	\f000	.fa-github-alt	\f113	.fa-music	\f001	.fa-folder-o	\f114
.fa-search	\f002	.fa-folder-open-o	\f115	.fa-envelope-o	\f003	.fa-smile-o	\f118
.fa-heart	\f004	.fa-frown-o	\f119	.fa-star	\f005	.fa-meh-o	\f11a
.fa-star-o	\f006	.fa-gamepad	\f11b	.fa-user	\f007	.fa-keyboard-o	\f11c
.fa-film	\f008	.fa-flag-o	\f11d	.fa-th-large	\f009	.fa-flag-checkered	\f11e
.fa-th	\f00a	.fa-terminal	\f120	.fa-th-list	\f00b	.fa-code	\f121
.fa-check	\f00c	.fa-mail-reply-all	\f122	.fa-remove	\f00d	.fa-reply-all	\f122
.fa-close	\f00d	.fa-star-half-empty	\f123	.fa-times	\f00d	.fa-star-half-full	\f123
.fa-search-plus	\f00e	.fa-star-half-o	\f123	.fa-search-minus	\f010	.fa-location-arrow	\f124
.fa-power-off	\f011	.fa-crop	\f125	.fa-signal	\f012	.fa-code-fork	\f126
.fa-gear	\f013	.fa-unlink	\f127	.fa-cog	\f013	.fa-chain-broken	\f127
.fa-trash-o	\f014	.fa-question	\f128	.fa-home	\f015	.fa-info	\f129
.fa-file-o	\f016	.fa-exclamation	\f12a	.fa-clock-o	\f017	.fa-superscript	\f12b
.fa-road	\f018	.fa-subscript	\f12c	.fa-download	\f019	.fa-eraser	\f12d
.fa-arrow-circle-o-down	\f01a	.fa-puzzle-piece	\f12e	.fa-arrow-circle-o-up	\f01b	.fa-microphone	\f130
.fa-inbox	\f01c	.fa-microphone-slash	\f131	.fa-play-circle-o	\f01d	.fa-shield	\f132
.fa-rotate-right	\f01e	.fa-calendar-o	\f133	.fa-repeat	\f01e	.fa-fire-extinguisher	\f134
.fa-refresh	\f021	.fa-rocket	\f135	.fa-list-alt	\f022	.fa-maxcdn	\f136
.fa-lock	\f023	.fa-chevron-circle-left	\f137	.fa-flag	\f024	.fa-chevron-circle-right	\f138
.fa-headphones	\f025	.fa-chevron-circle-up	\f139	.fa-volume-off	\f026	.fa-chevron-circle-down	\f13a
.fa-volume-down	\f027	.fa-html5	\f13b	.fa-volume-up	\f028	.fa-css3	\f13c
.fa-qrcode	\f029	.fa-anchor	\f13d	.fa-barcode	\f02a	.fa-unlock-alt	\f13e
.fa-tag	\f02b	.fa-bullseye	\f140	.fa-tags	\f02c	.fa-ellipsis-h	\f141
.fa-book	\f02d	.fa-ellipsis-v	\f142	.fa-bookmark	\f02e	.fa-rss-square	\f143
.fa-print	\f02f	.fa-play-circle	\f144	.fa-camera	\f030	.fa-ticket	\f145
.fa-font	\f031	.fa-minus-square	\f146	.fa-bold	\f032	.fa-minus-square-o	\f147
.fa-italic	\f033	.fa-level-up	\f148	.fa-text-height	\f034	.fa-level-down	\f149
.fa-text-width	\f035	.fa-check-square	\f14a	.fa-align-left	\f036	.fa-pencil-square	\f14b
.fa-align-center	\f037	.fa-external-link-square	\f14c	.fa-align-right	\f038	.fa-share-square	\f14d
.fa-align-justify	\f039	.fa-compass	\f14e	.fa-list	\f03a	.fa-toggle-down	\f150
.fa-dedent	\f03b	.fa-caret-square-o-down	\f150	.fa-outdent	\f03b	.fa-toggle-up	\f151
.fa-indent	\f03c	.fa-caret-square-o-up	\f151	.fa-video-camera	\f03d	.fa-toggle-right	\f152
.fa-photo	\f03e	.fa-caret-square-o-right	\f152	.fa-image	\f03e	.fa-euro	\f153
.fa-picture-o	\f03e	.fa-eur	\f153	.fa-pencil	\f040	.fa-gbp	\f154
.fa-map-marker	\f041	.fa-dollar	\f155	.fa-adjust	\f042	.fa-usd	\f155
.fa-tint	\f043	.fa-rupee	\f156	.fa-edit	\f044	.fa-inr	\f156
.fa-pencil-square-o	\f044	.fa-cny	\f157	.fa-share-square-o	\f045	.fa-rmb	\f157
.fa-check-square-o	\f046	.fa-yen	\f157	.fa-arrows	\f047	.fa-jpy	\f157
.fa-step-backward	\f048	.fa-ruble	\f158	.fa-fast-backward	\f049	.fa-rouble	\f158
.fa-backward	\f04a	.fa-rub	\f158	.fa-play	\f04b	.fa-won	\f159
.fa-pause	\f04c	.fa-krw	\f159	.fa-stop	\f04d	.fa-bitcoin	\f15a
.fa-forward	\f04e	.fa-btc	\f15a	.fa-fast-forward	\f050	.fa-file	\f15b
.fa-step-forward	\f051	.fa-file-text	\f15c	.fa-eject	\f052	.fa-sort-alpha-asc	\f15d
.fa-chevron-left	\f053	.fa-sort-alpha-desc	\f15e	.fa-chevron-right	\f054	.fa-sort-amount-asc	\f160
.fa-plus-circle	\f055	.fa-sort-amount-desc	\f161	.fa-minus-circle	\f056	.fa-sort-numeric-asc	\f162
.fa-times-circle	\f057	.fa-sort-numeric-desc	\f163	.fa-check-circle	\f058	.fa-thumbs-up	\f164
.fa-question-circle	\f059	.fa-thumbs-down	\f165	.fa-info-circle	\f05a	.fa-youtube-square	\f166
.fa-crosshairs	\f05b	.fa-youtube	\f167	.fa-times-circle-o	\f05c	.fa-xing	\f168
.fa-check-circle-o	\f05d	.fa-xing-square	\f169	.fa-ban	\f05e	.fa-youtube-play	\f16a
.fa-arrow-left	\f060	.fa-dropbox	\f16b	.fa-arrow-right	\f061	.fa-stack-overflow	\f16c
.fa-arrow-up	\f062	.fa-instagram	\f16d	.fa-arrow-down	\f063	.fa-flickr	\f16e
.fa-mail-forward	\f064	.fa-adn	\f170	.fa-share	\f064	.fa-bitbucket	\f171
.fa-expand	\f065	.fa-bitbucket-square	\f172	.fa-compress	\f066	.fa-tumblr	\f173
.fa-plus	\f067	.fa-tumblr-square	\f174	.fa-minus	\f068	.fa-long-arrow-down	\f175
.fa-asterisk	\f069	.fa-long-arrow-up	\f176	.fa-exclamation-circle	\f06a	.fa-long-arrow-left	\f177
.fa-gift	\f06b	.fa-long-arrow-right	\f178	.fa-leaf	\f06c	.fa-apple	\f179
.fa-fire	\f06d	.fa-windows	\f17a	.fa-eye	\f06e	.fa-android	\f17b
.fa-eye-slash	\f070	.fa-linux	\f17c	.fa-warning	\f071	.fa-dribbble	\f17d
.fa-exclamation-triangle	\f071	.fa-skype	\f17e	.fa-plane	\f072	.fa-foursquare	\f180
.fa-calendar	\f073	.fa-trello	\f181	.fa-random	\f074	.fa-female	\f182
.fa-comment	\f075	.fa-male	\f183	.fa-magnet	\f076	.fa-gittip	\f184
.fa-chevron-up	\f077	.fa-sun-o	\f185	.fa-chevron-down	\f078	.fa-moon-o	\f186
.fa-retweet	\f079	.fa-archive	\f187	.fa-shopping-cart	\f07a	.fa-bug	\f188
.fa-folder	\f07b	.fa-vk	\f189	.fa-folder-open	\f07c	.fa-weibo	\f18a
.fa-arrows-v	\f07d	.fa-renren	\f18b	.fa-arrows-h	\f07e	.fa-pagelines	\f18c
.fa-bar-chart-o	\f080	.fa-stack-exchange	\f18d	.fa-bar-chart	\f080	.fa-arrow-circle-o-right	\f18e
.fa-twitter-square	\f081	.fa-arrow-circle-o-left	\f190	.fa-facebook-square	\f082	.fa-toggle-left	\f191
.fa-camera-retro	\f083	.fa-caret-square-o-left	\f191	.fa-key	\f084	.fa-dot-circle-o	\f192
.fa-gears	\f085	.fa-wheelchair	\f193	.fa-cogs	\f085	.fa-vimeo-square	\f194
.fa-comments	\f086	.fa-turkish-lira	\f195	.fa-thumbs-o-up	\f087	.fa-try	\f195
.fa-thumbs-o-down	\f088	.fa-plus-square-o	\f196	.fa-star-half	\f089	.fa-space-shuttle	\f197
.fa-heart-o	\f08a	.fa-slack	\f198	.fa-sign-out	\f08b	.fa-envelope-square	\f199
.fa-linkedin-square	\f08c	.fa-wordpress	\f19a	.fa-thumb-tack	\f08d	.fa-openid	\f19b
.fa-external-link	\f08e	.fa-institution	\f19c	.fa-sign-in	\f090	.fa-bank	\f19c
.fa-trophy	\f091	.fa-university	\f19c	.fa-github-square	\f092	.fa-mortar-board	\f19d
.fa-upload	\f093	.fa-graduation-cap	\f19d	.fa-lemon-o	\f094	.fa-yahoo	\f19e
.fa-phone	\f095	.fa-google	\f1a0	.fa-square-o	\f096	.fa-reddit	\f1a1
.fa-bookmark-o	\f097	.fa-reddit-square	\f1a2	.fa-phone-square	\f098	.fa-stumbleupon-circle	\f1a3
.fa-twitter	\f099	.fa-stumbleupon	\f1a4	.fa-facebook	\f09a	.fa-delicious	\f1a5
.fa-github	\f09b	.fa-digg	\f1a6	.fa-unlock	\f09c	.fa-pied-piper	\f1a7
.fa-credit-card	\f09d	.fa-pied-piper-alt	\f1a8	.fa-rss	\f09e	.fa-drupal	\f1a9
.fa-hdd-o	\f0a0	.fa-joomla	\f1aa	.fa-bullhorn	\f0a1	.fa-language	\f1ab
.fa-bell	\f0f3	.fa-fax	\f1ac	.fa-certificate	\f0a3	.fa-building	\f1ad
.fa-hand-o-right	\f0a4	.fa-child	\f1ae	.fa-hand-o-left	\f0a5	.fa-paw	\f1b0
.fa-hand-o-up	\f0a6	.fa-spoon	\f1b1	.fa-hand-o-down	\f0a7	.fa-cube	\f1b2
.fa-arrow-circle-left	\f0a8	.fa-cubes	\f1b3	.fa-arrow-circle-right	\f0a9	.fa-behance	\f1b4
.fa-arrow-circle-up	\f0aa	.fa-behance-square	\f1b5	.fa-arrow-circle-down	\f0ab	.fa-steam	\f1b6
.fa-globe	\f0ac	.fa-steam-square	\f1b7	.fa-wrench	\f0ad	.fa-recycle	\f1b8
.fa-tasks	\f0ae	.fa-automobile	\f1b9	.fa-filter	\f0b0	.fa-car	\f1b9
.fa-briefcase	\f0b1	.fa-cab	\f1ba	.fa-arrows-alt	\f0b2	.fa-taxi	\f1ba
.fa-group	\f0c0	.fa-tree	\f1bb	.fa-users	\f0c0	.fa-spotify	\f1bc
.fa-chain	\f0c1	.fa-deviantart	\f1bd	.fa-link	\f0c1	.fa-soundcloud	\f1be
.fa-cloud	\f0c2	.fa-database	\f1c0	.fa-flask	\f0c3	.fa-file-pdf-o	\f1c1
.fa-cut	\f0c4	.fa-file-word-o	\f1c2	.fa-scissors	\f0c4	.fa-file-excel-o	\f1c3
.fa-copy	\f0c5	.fa-file-powerpoint-o	\f1c4	.fa-files-o	\f0c5	.fa-file-photo-o	\f1c5
.fa-paperclip	\f0c6	.fa-file-picture-o	\f1c5	.fa-save	\f0c7	.fa-file-image-o	\f1c5
.fa-floppy-o	\f0c7	.fa-file-zip-o	\f1c6	.fa-square	\f0c8	.fa-file-archive-o	\f1c6
.fa-navicon	\f0c9	.fa-file-sound-o	\f1c7	.fa-reorder	\f0c9	.fa-file-audio-o	\f1c7
.fa-bars	\f0c9	.fa-file-movie-o	\f1c8	.fa-list-ul	\f0ca	.fa-file-video-o	\f1c8
.fa-list-ol	\f0cb	.fa-file-code-o	\f1c9	.fa-strikethrough	\f0cc	.fa-vine	\f1ca
.fa-underline	\f0cd	.fa-codepen	\f1cb	.fa-table	\f0ce	.fa-jsfiddle	\f1cc
.fa-magic	\f0d0	.fa-life-bouy	\f1cd	.fa-truck	\f0d1	.fa-life-buoy	\f1cd
.fa-pinterest	\f0d2	.fa-life-saver	\f1cd	.fa-pinterest-square	\f0d3	.fa-support	\f1cd
.fa-google-plus-square	\f0d4	.fa-life-ring	\f1cd	.fa-google-plus	\f0d5	.fa-circle-o-notch	\f1ce
.fa-money	\f0d6	.fa-ra	\f1d0	.fa-caret-down	\f0d7	.fa-rebel	\f1d0
.fa-caret-up	\f0d8	.fa-ge	\f1d1	.fa-caret-left	\f0d9	.fa-empire	\f1d1
.fa-caret-right	\f0da	.fa-git-square	\f1d2	.fa-columns	\f0db	.fa-git	\f1d3
.fa-unsorted	\f0dc	.fa-hacker-news	\f1d4	.fa-sort	\f0dc	.fa-tencent-weibo	\f1d5
.fa-sort-down	\f0dd	.fa-qq	\f1d6	.fa-sort-desc	\f0dd	.fa-wechat	\f1d7
.fa-sort-up	\f0de	.fa-weixin	\f1d7	.fa-sort-asc	\f0de	.fa-send	\f1d8
.fa-envelope	\f0e0	.fa-paper-plane	\f1d8	.fa-linkedin	\f0e1	.fa-send-o	\f1d9
.fa-rotate-left	\f0e2	.fa-paper-plane-o	\f1d9	.fa-undo	\f0e2	.fa-history	\f1da
.fa-legal	\f0e3	.fa-circle-thin	\f1db	.fa-gavel	\f0e3	.fa-header	\f1dc
.fa-dashboard	\f0e4	.fa-paragraph	\f1dd	.fa-tachometer	\f0e4	.fa-sliders	\f1de
.fa-comment-o	\f0e5	.fa-share-alt	\f1e0	.fa-comments-o	\f0e6	.fa-share-alt-square	\f1e1
.fa-flash	\f0e7	.fa-bomb	\f1e2	.fa-bolt	\f0e7	.fa-soccer-ball-o	\f1e3
.fa-sitemap	\f0e8	.fa-futbol-o	\f1e3	.fa-umbrella	\f0e9	.fa-tty	\f1e4
.fa-paste	\f0ea	.fa-binoculars	\f1e5	.fa-clipboard	\f0ea	.fa-plug	\f1e6
.fa-lightbulb-o	\f0eb	.fa-slideshare	\f1e7	.fa-exchange	\f0ec	.fa-twitch	\f1e8
.fa-cloud-download	\f0ed	.fa-yelp	\f1e9	.fa-cloud-upload	\f0ee	.fa-newspaper-o	\f1ea
.fa-user-md	\f0f0	.fa-wifi	\f1eb	.fa-stethoscope	\f0f1	.fa-calculator	\f1ec
.fa-suitcase	\f0f2	.fa-paypal	\f1ed	.fa-bell-o	\f0a2	.fa-google-wallet	\f1ee
.fa-coffee	\f0f4	.fa-cc-visa	\f1f0	.fa-cutlery	\f0f5	.fa-cc-mastercard	\f1f1
.fa-file-text-o	\f0f6	.fa-cc-discover	\f1f2	.fa-building-o	\f0f7	.fa-cc-amex	\f1f3
.fa-hospital-o	\f0f8	.fa-cc-paypal	\f1f4	.fa-ambulance	\f0f9	.fa-cc-stripe	\f1f5
.fa-medkit	\f0fa	.fa-bell-slash	\f1f6	.fa-fighter-jet	\f0fb	.fa-bell-slash-o	\f1f7
.fa-beer	\f0fc	.fa-trash	\f1f8	.fa-h-square	\f0fd	.fa-copyright	\f1f9
.fa-plus-square	\f0fe	.fa-at	\f1fa	.fa-angle-double-left	\f100	.fa-eyedropper	\f1fb
.fa-angle-double-right	\f101	.fa-paint-brush	\f1fc	.fa-angle-double-up	\f102	.fa-birthday-cake	\f1fd
.fa-angle-double-down	\f103	.fa-area-chart	\f1fe	.fa-angle-left	\f104	.fa-pie-chart	\f200
.fa-angle-right	\f105	.fa-line-chart	\f201	.fa-angle-up	\f106	.fa-lastfm	\f202
.fa-angle-down	\f107	.fa-lastfm-square	\f203	.fa-desktop	\f108	.fa-toggle-off	\f204
.fa-laptop	\f109	.fa-toggle-on	\f205	.fa-tablet	\f10a	.fa-bicycle	\f206
.fa-mobile-phone	\f10b	.fa-bus	\f207	.fa-mobile	\f10b	.fa-ioxhost	\f208
.fa-circle-o	\f10c	.fa-angellist	\f209	.fa-quote-left	\f10d	.fa-cc	\f20a
.fa-quote-right	\f10e	.fa-shekel	\f20b	.fa-spinner	\f110	.fa-sheqel	\f20b
.fa-circle	\f111	.fa-ils	\f20b	.fa-mail-reply	\f112	.fa-meanpath	\f20c
.fa-reply	\f112