javascript - Drag and Drop HTML5 not working? -

-

i trying understand drag , drop html5, can drag , have element suppose take dragged element accept it. cant ondrag or ondragenter, or @ least functions events call work i'm not sure i'm doing wrong.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>week 3 drag , drop</title> <link rel="stylesheet" type="text/css" href="week3draganddropcss.css"> <script src="week3draganddropjs.js"></script> </head> <body> <header>     <h1>week 3 drag , drop</h1> </header>  <div style="height:200px;width:200px;background: red"         id="obj1"draggable="true"></div> <div style="height:200px;width:200px;background:     green"id="obj2"draggable="true"></div> <div style="height:200px;width:200px;background: orange"      id="obj3"draggable="true"></div>     <div style="height:200px;width:200px;background-image: url     ('trash.png');background-repeat: no-repeat;" id="trashcan"      ondragover="allowdrop(event)" ondragenter="setborder(event,'5px')"      ondragleave="setborder(event,'2px')" ondrop="drop(event)"></div>     <footer>  </footer>      </body>      </html>

then here js:

function drag(evt){ evt.datatransfer.setdata("color", ev.target.background); } function allowdrop(evt){ evt.preventdefault(); } function drop(evt){ evt.preventdefault(); var color = evt.datatransfer.getdata("color"); evt.currenttarget.style.background = color;   } function setborder(evt,size){ evt.currenttarget.border = (size +"solid black"); }

minor syntax mistakes reffer following fiddle

function drag(evt){    evt.datatransfer.setdata("color",   evt.target.style.backgroundcolor);  }  function allowdrop(evt){  evt.preventdefault();  }  function drop(evt){  evt.preventdefault();  var color = evt.datatransfer.getdata("color");  evt.currenttarget.style.background = color;     }  function setborder(evt,size){  evt.currenttarget.style.border = (size +" solid black");  }
<body>  <header>      <h1>week 3 drag , drop</h1>  </header>    <div style="height:200px;width:200px;background: red"          id="obj1"draggable="true" ondragstart="drag(event)"></div>  <div style="height:200px;width:200px;background:      green"id="obj2"draggable="true" ondragstart="drag(event)"></div>  <div style="height:200px;width:200px;background: orange"       id="obj3"draggable="true" ondragstart="drag(event)"></div>      <div style="height:200px;width:200px;background-image: url      ('trash.png');background-repeat: no-repeat;" id="trashcan"       ondragover="allowdrop(event)" ondragenter="setborder(event,'5px')"       ondragleave="setborder(event,'2px')" ondrop="drop(event)"></div>          <footer>    </footer>        </body>


Comments

Post a Comment

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

-
i trying fetch records database , having above error this classs appropriate getters , setters public class user { private int id; private string username; private string password; private string email; i have create database , inserted data below configuration <bean id="datasource" class="org.apache.commons.dbcp2.basicdatasource" destroy-method="close"> <property name="driverclassname" value="com.mysql.jdbc.driver"/> <property name="url" value="jdbc:mysql://localhost:3306/usersdb"/> <property name="username" value="root"/> <property name="password" value=""/> </bean> this complete stacktrace severe: servlet.service() servlet [appservlet] in context path [/spring] threw exception [request processing failed; nested exception org.hibernate.exception.sqlgrammarexception: not ...
Read more

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

-
Image
i have postgresql db number of tables. if query: select column_name information_schema.columns table_name="my_table"; i list of columns returned properly. however, when query: select * "my_table"; i error: (programmingerror) relation "my_table" not exist 'select *\n "my_table"\n' {} any thoughts on why can columns, can't query table? goal able query table. you have include schema if isnt public one select * <schema>."my_table" or can change default schema show search_path; set search_path my_schema; check table schema here select * information_schema.columns for example if table on default schema public both works ok select * parroquias_region select * public.parroquias_region but sectors need specify schema select * map_update.sectores_point
Read more

asp.net mvc - breakpoint on javascript in CSHTML? -

-
i have .cshtml file has javascript tag. within script tag have few lines of javascript. first line of javascript refers property in @viewbag. other javascript lines plain script without mvc related references. observation: can place breakpoints (visual studio 2015) on each of these javascript lines. however, breakpoints has white dot in center of breakpoint symbol (red circle) except line @viewbag reference (this particular line not have white dot in center). it seems breakpoint without white dot hit during run-time. question: can explain going on here? white dot mean? why plain red breakpoint line line hitting breakpoint? the visual studio debugger expecting debug actual server-side code within .cshtml file opposed client-side javascript within it. iirc, visual studio allow debug javascript code expected in internet explorer (and possibly edge), other browsers want use either third-party tool or developer tools (f12) within browser. an easy approach take advant...
Read more