[javascript] Drag and drop menuitems

I want to rearrange menuitems by drag and drop in my firefox addon like the bookmarks in the Bookmarks menu. Specifically, I want the blue insertion marker to appear while dragging a menuitem over valid places. Can someone show me how to do this or tell me where the relevant code for bookmarks is located?

This question is related to javascript firefox drag-and-drop firefox-addon xul

The answer is


jQuery UI draggable and droppable are the two plugins I would use to achieve this effect. As for the insertion marker, I would investigate modifying the div (or container) element that was about to have content dropped into it. It should be possible to modify the border in some way or add a JavaScript/jQuery listener that listens for the hover (element about to be dropped) event and modifies the border or adds an image of the insertion marker in the right place.


Questions with javascript tag:

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax Drag and drop menuitems Is it possible to execute multiple _addItem calls asynchronously using Google Analytics? DevTools failed to load SourceMap: Could not load content for chrome-extension TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app What does 'x packages are looking for funding' mean when running `npm install`? SyntaxError: Cannot use import statement outside a module SameSite warning Chrome 77 "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 Why powershell does not run Angular commands? Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Push method in React Hooks (useState)? JS file gets a net::ERR_ABORTED 404 (Not Found) React Hooks useState() with Object useState set method not reflecting change immediately Can't perform a React state update on an unmounted component UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block Can I set state inside a useEffect hook internal/modules/cjs/loader.js:582 throw err How to post query parameters with Axios? How to use componentWillMount() in React Hooks? React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in ionic 3 How can I force component to re-render with hooks in React? What is useState() in React? How to call loading function with React useEffect only once Objects are not valid as a React child. If you meant to render a collection of children, use an array instead How to reload current page? Center content vertically on Vuetify Getting all documents from one collection in Firestore ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment How can I add raw data body to an axios request? Sort Array of object by object field in Angular 6 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) Axios Delete request with body and headers? Enable CORS in fetch api Vue.js get selected option on @change Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) Angular 6: How to set response type as text while making http call

Questions with firefox tag:

Drag and drop menuitems Class has been compiled by a more recent version of the Java Environment Only on Firefox "Loading failed for the <script> with source" Selenium using Python - Geckodriver executable needs to be in PATH Selenium using Java - The path to the driver executable must be set by the webdriver.gecko.driver system property How to use the gecko executable with Selenium Selenium 2.53 not working on Firefox 47 Postman addon's like in firefox Edit and replay XHR chrome/firefox etc? How to enable CORS on Firefox? JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..." The character encoding of the plain text document was not declared - mootool script Firefox 'Cross-Origin Request Blocked' despite headers Hide Spinner in Input Number - Firefox 29 How to get HTML 5 input type="date" working in Firefox and/or IE 10 How to verify an XPath expression in Chrome Developers tool or Firefox's Firebug? "application blocked by security settings" prevent applets running using oracle SE 7 update 51 on firefox on Linux mint How to hide scrollbar in Firefox? ReferenceError: event is not defined error in Firefox How can I detect browser type using jQuery? How to debug Angular JavaScript Code SSH -L connection successful, but localhost port forwarding not working "channel 3: open failed: connect failed: Connection refused" onchange event on input type=range is not triggering in firefox while dragging Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox? Disable cross domain web security in Firefox How to open a new tab using Selenium WebDriver Disable firefox same origin policy Hide scroll bar, but while still being able to scroll How can I simulate mobile devices and debug in Firefox Browser? Get current cursor position in a textbox Submit button doesn't work Cannot find firefox binary in PATH. Make sure firefox is installed. OS appears to be: VISTA How to add java plugin for Firefox on Linux? How to open SharePoint files in Chrome/Firefox How to Maximize a firefox browser window using Selenium WebDriver with node.js Play sound file in a web-page in the background Take a full page screenshot with Firefox on the command-line Preventing an image from being draggable or selectable without using JS clear cache of browser by command line Webdriver Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms The right way of setting <a href=""> when it's a local file Save base64 string as PDF at client side with JavaScript X-Frame-Options: ALLOW-FROM in firefox and chrome Playing MP4 files in Firefox using HTML5 video View JSON file in Browser Does Google Chrome work with Selenium IDE (as Firefox does)? Difference between DOM parentNode and parentElement Is there a css cross-browser value for "width: -moz-fit-content;"? .setAttribute("disabled", false); changes editable attribute to false Detect all Firefox versions in JS

Questions with drag-and-drop tag:

Drag and drop menuitems How to automate drag & drop functionality using Selenium WebDriver Java drag drop files into standard html file input How do I remove a file from the FileList Is there a good jQuery Drag-and-drop file upload plugin? Drag and drop elements from list into separate blocks How do I get the coordinate position after using jQuery drag and drop? How do I drag and drop files into an application?

Questions with firefox-addon tag:

Drag and drop menuitems Postman addon's like in firefox Convert URL to File or Blob for FileReader.readAsDataURL Getting "net::ERR_BLOCKED_BY_CLIENT" error on some AJAX calls How can I fix WebStorm warning "Unresolved function or method" for "require" (Firefox Add-on SDK) How to add java plugin for Firefox on Linux? Firefox Add-on RESTclient - How to input POST parameters? .setAttribute("disabled", false); changes editable attribute to false What is a MIME type? Parsing JSON from XmlHttpRequest.responseJSON Common sources of unterminated string literal

Questions with xul tag:

Drag and drop menuitems .setAttribute("disabled", false); changes editable attribute to false How can I force a long string without any blank to be wrapped?