Databases
StackOverflow2013
Postsdbo
POhtml5 drag and drop prevent drop unless div empty
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhtml5 drag and drop prevent drop unless div empty
    primarykey
    data
    text
    <p>I'm attempting to create a sort of visual interface for simple graphic creation. It consists of 10 image icons, and 5 boxes in which those icons can be placed. I want users to be able to pick which of the 10 icons they would like to display, and arrange the elements as they see fit using drag and drop. The 5 icons are also inside of a div in which the icons can be dropped, so that they can return the icon to the "home" row if they change their mind and wish to select another icon.</p> <p>not unlike this simple tutorial, but with more divs and icons: <a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2" rel="nofollow">http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2</a></p> <p>my script:</p> <pre><code>&lt;script&gt; function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); //CSS CHANGES HERE FOR ON PICKUP $( ".dragfive" ).css("border", "2px solid #ff9d00"); $( ".select5" ).css("border", "2px solid #ff9d00"); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); //CSS CHANGES HERE FOR ON DROP $( ".dragfive" ).css("border", "2px solid transparent"); $( ".select5" ).css("border", "2px solid transparent"); } &lt;/script&gt; </code></pre> <p>my code is exactly the same as the tutorial, but I've added some nice CSS changes as the comments indicate - I made colorful borders appear to indicate to users where they can place the item. These become transparent once dropped. Works perfectly except...</p> <ol> <li>how can I prevent an icon from being dropped on top of another icon? (or rather, only allow dropping the icon into an empty div?)</li> <li>If I wished to create a second set of icons and replicate the process, how can I keep them and their allowed drop area separate? (so that the icons do not end up in unintended places)</li> </ol> <p>thanks a bunch.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. UScloudy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POhtml5 drag and drop prevent drop unless div empty
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POhtml5 drag and drop prevent drop unless div empty
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POhtml5 drag and drop prevent drop unless div empty
      1. USGanesh Ram
      1. VTFavorite
    1. COCould you set this up as a jsfiddle? Otherwise, post your html and updated code, please.
      singulars
      1. POhtml5 drag and drop prevent drop unless div empty
      1. USScott Mermelstein
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload