{"id":252,"date":"2008-12-09T19:24:11","date_gmt":"2008-12-10T00:24:11","guid":{"rendered":"http:\/\/www.eligrey.com\/?p=252"},"modified":"2008-12-09T19:24:11","modified_gmt":"2008-12-10T00:24:11","slug":"citedrag-drag-and-drop-script","status":"publish","type":"post","link":"https:\/\/eligrey.com\/blog\/citedrag-drag-and-drop-script\/","title":{"rendered":"CiteDrag drag and drop script"},"content":{"rendered":"<p>Firefox 3.1 beta 2 recently added <a href=\"https:\/\/developer.mozilla.org\/En\/DragDrop\/Drag_and_Drop\">support for the standard drag and drop model<\/a> (also with some extra Mozilla-only ones). I had an idea to automatically add citation info to text dragged from websites to plain and rich text editors using this newly supported API. I named the <a title=\"citedrag.js\" href=\"http:\/\/test.eligrey.com\/citedrag\/latest\/citedrag.js\">finished script<\/a> CiteDrag, which requires no setup other than adding a single script tag anywhere in your website&#8217;s page. CiteDrag is <a href=\"http:\/\/www.gnu.org\/licenses\/lgpl.html\">licensed <acronym title=\"GNU Lesser General Public License\">GNU LGPL<\/acronym><\/a> and free to download in two flavors: <a href=\"http:\/\/code.eligrey.com\/citedrag\/latest\/citedrag.js\">CiteDrag<\/a> and <a href=\"http:\/\/code.eligrey.com\/citedrag\/0.0.3\/citedrag-dragimage.js\">CiteDrag + Drag Image<\/a>. CiteDrag + Drag Image is all of the normal CiteDrag code with some additional code to give a fancy canvas-generated drag image that shows the text content being dragged. CiteDrag is mostly useful for when someone blogs about another person&#8217;s blog post. Having the text automatically go into a cited blockquote and having a link back is very useful. I have installed CiteDrag on this blog and I have a <a href=\"http:\/\/code.eligrey.com\/citedrag\/test.html\">demo<\/a> of it and a <a href=\"http:\/\/code.eligrey.com\/citedrag\/richtextarea.html\">rich text area<\/a> you can use to test out CiteDrag fully.<\/p>\n<p>Here are some examples of what it does when you drag various data types to various input areas: (Note wherever it says title, it will be replaced with the host name of the source page if there is no page title)<\/p>\n<ul>\n<li>Drag a link or image (or linked image) to a normal text input: { <strong>[link URI]<\/strong> or <strong>[image URI]<\/strong> } via {<strong>source title<\/strong>} ( {<strong>source URI<\/strong>} )\n<ul>\n<li>Example:\u00a0 http:\/\/example.com\/ via Foobar ( http:\/\/foo.bar\/post\/example.com-ftw\/ )<\/li>\n<\/ul>\n<\/li>\n<li>Drag a link or image (or linked image) to a rich text input: { <strong>[clickable link to link URI]<\/strong> or <strong>[image URI]<\/strong> or <strong>[clickable image linked to link URI]<\/strong> } via {<strong>clickable link to source page with title as text<\/strong>}\n<ul>\n<li>Example:\u00a0 <a href=\"http:\/\/example.com\/\">Example Web Page<\/a> via <a href=\"http:\/\/www.eligrey.com\/\">Eli Grey<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Drag formatted or non-formatted text to a normal text input: \u201c{<strong>Text dragged<\/strong>}\u201d \u2015 {<strong>source title<\/strong>} ( {<strong>source URI<\/strong>} )\n<ul>\n<li>Example:\u00a0 \u201cLorem ipsum dolor sit amet.\u201d \u2015 Eli Grey ( http:\/\/www.eligrey.com\/ )<\/li>\n<\/ul>\n<\/li>\n<li>Drag formatted or non-formatted text into a rich text input: The dragged text goes into a &lt;blockquote cite=&#8221;{<strong>source URI<\/strong>}&#8221;&gt; and after the blockquote is \u2015 {<strong>clickable link to source page with title as text<\/strong>}\n<ul>\n<li>Example:<br \/>\n<blockquote><p>Lorem ipsum dolor sit amet.<\/p><\/blockquote>\n<div>\u2015 <a href=\"http:\/\/www.eligrey.com\/\">Eli Grey<\/a><\/div>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Firefox 3.1 beta 2 recently added support for the standard drag and drop model (also with some extra Mozilla-only ones). I had an idea to automatically add citation info to text dragged from websites to plain and rich text editors using this newly supported API. I named the finished script CiteDrag, which requires no setup [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[13,15,16,51,53,90,93,133],"class_list":["post-252","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-blog","tag-browsers","tag-citedrag","tag-firefox-3-1","tag-firefox-3-1-beta-2","tag-javascript","tag-javascript-snippets","tag-projects"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pfpUD-44","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":0,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"wp:attachment":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}