i rather new html , javascript , have started project in mvc5, trying implement drag , drop panels , have been following tutorial. problem when try drag panel(to belief) javascript code not run, due being incorrect cannot see wrong. here tutorial following http://www.html5rocks.com/en/tutorials/dnd/basics/
here javascript code
function handledragstart(e) { e.target.style.opacity = '0.4'; // e.target source node. } var cols = document.queryselectorall('#columns .column'); [].foreach.call(cols, function (col) { col.addeventlistener('dragstart', handledragstart, false); }); and here panels trying drag:
@{ viewbag.title = "index"; layout = "~/views/shared/movielayout.cshtml"; } <h2>welcome dashboard!</h2> <div class="row" id="columns"> <div class="col-md-4 column"> <div class="panel panel-default" draggable="true"> <div class="panel-heading"> <h3 class="panel-title">panel title</h3> </div> <div class="panel-body"> panel content </div> </div> </div> <div class="col-md-4 column"> <div class="panel panel-default" draggable="true"> <div class="panel-heading"> <h3 class="panel-title">panel title</h3> </div> <div class="panel-body"> panel content </div> </div> </div> <div class="col-md-4 column"> <div class="panel panel-default" draggable="true"> <div class="panel-heading"> <h3 class="panel-title">panel title</h3> </div> <div class="panel-body"> panel content </div> </div> </div> </div> i have referenced javascript file within head tags in layout shared view so.
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@viewbag.title - asp.net application</title> @styles.render("~/content/css") @scripts.render("~/bundles/modernizr") <script src="~/scripts/dashboard.js"></script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @html.actionlink("mvcmovie", "index", "home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="@url.action("index", "dashboard")"> dashboard <span class="glyphicon glyphicon-home" /> </a> </li> <li> <a href="@url.action("index", "devices")"> devices <span class="glyphicon glyphicon-phone" /> </a> </li> <li> <a href="@url.action("index", "alerts")"> alerts <span class="glyphicon glyphicon-volume-up" /> </a> </li> <li> <a href="@url.action("index", "services")"> services <span class="glyphicon glyphicon-list-alt" /> </a> </li> <li> <a href="@url.action("index", "settings")"> settings <span class="glyphicon glyphicon-wrench" /> </a> </li> </ul> @html.partial("_loginpartial") </div> </div> </div> <div class="container-fluid body-content"> @renderbody() <hr /> <footer> <p>© @datetime.now.year - whitespider.eu</p> </footer> </div> @scripts.render("~/bundles/jquery") @scripts.render("~/bundles/bootstrap") @rendersection("scripts", required: false) </body> </html> thanks.
you looking wrong element!
document.queryselectorall('#columns .column'); but have .panel
working example:
function handledragstart(e) { this.style.opacity = '0.4'; // / e.target source node. } var columns = document.queryselectorall('.column'); [].foreach.call(columns, function (column) { column.addeventlistener('dragstart', handledragstart, false); });<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="row" id="columns"> <div class="col-md-4 column"> <div class="panel panel-default" draggable="true"> <div class="panel-heading"> <h3 class="panel-title">panel title</h3> </div> <div class="panel-body"> panel content </div> </div> </div> <div class="col-md-4 column"> <div class="panel panel-default" draggable="true"> <div class="panel-heading"> <h3 class="panel-title">panel title</h3> </div> <div class="panel-body"> panel content </div> </div> </div> <div class="col-md-4 column"> <div class="panel panel-default" draggable="true"> <div class="panel-heading"> <h3 class="panel-title">panel title</h3> </div> <div class="panel-body"> panel content </div> </div> </div> </div> </body>
Comments
Post a Comment