CODEWITHSUNDEEP
htmlmacosgoogle-chromedrag-and-drop
Tyler DeWitt
Tyler DeWitt

Reputation: 23576

Chrome Drag and Drop Divs

I was playing around with Chrome (Version 30.0.1599.101) on Mac OS X 10.8.5 in Presentation Mode with a touch screen enabled tv when all of a sudden my div's became draggable. We had not enabled drag and drop features via jquery nor the HTML5 spec, but somehow we were able to drag our divs around and place them anywhere on the screen. We could rotate and resize them. When we refreshed the page, this functionality stopped. Any ideas how this was possible?

We had previously enabled the "Emulate Touch Events" from the Dev Tools, but the Dev Tools weren't open when this functionality showed itself. Also, we had installed then uninstalled the Chrome MuliTouch Extension.

EDIT

HTML for page:

<!DOCTYPE html>
<html>
  <head>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
      <title>ArcSite Demonstration</title>
      <meta content='Arcsite' name='description'>
        <link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.accordion.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.menu.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.autocomplete.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.button.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.resizable.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.dialog.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.progressbar.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.selectable.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.slider.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.spinner.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.tabs.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.tooltip.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.base.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.all.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jqplot.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/open_layers/style.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/a_maps_layout.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/alerts.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/companies.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/factory_details.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery-ui-timepicker-addon.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/locations.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/tags.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/tracked_points.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/workers.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
        <script src="/assets/openlayers/OpenLayers.js?body=1" type="text/javascript"></script>
        <script src="/assets/openlayers-rails.js?body=1" type="text/javascript"></script>
        <script src="/assets/unity/UnityObject2.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.accordion.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.position.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.menu.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.autocomplete.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.button.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.mouse.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.draggable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.resizable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.dialog.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.droppable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-blind.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-bounce.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-clip.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-drop.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-explode.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-fade.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-fold.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-highlight.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-pulsate.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-scale.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-shake.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-slide.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-transfer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.progressbar.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.selectable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.slider.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.sortable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.spinner.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.tabs.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.tooltip.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.all.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery-ui-timepicker-addon.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/index.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/jquery.jqplot.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/excanvas.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/pieRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/barRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/categoryAxisRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/canvasAxisLabelRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/canvasTextRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/private_pub.js?body=1" type="text/javascript"></script>
        <script src="/assets/alerts.js?body=1" type="text/javascript"></script>
        <script src="/assets/companies.js?body=1" type="text/javascript"></script>
        <script src="/assets/factories.js?body=1" type="text/javascript"></script>
        <script src="/assets/home.js?body=1" type="text/javascript"></script>
        <script src="/assets/hr_dept.js?body=1" type="text/javascript"></script>
        <script src="/assets/location_import.js?body=1" type="text/javascript"></script>
        <script src="/assets/locations.js?body=1" type="text/javascript"></script>
        <script src="/assets/tags.js?body=1" type="text/javascript"></script>
        <script src="/assets/tracked_points.js?body=1" type="text/javascript"></script>
        <script src="/assets/workers.js?body=1" type="text/javascript"></script>
        <script src="/assets/zones.js?body=1" type="text/javascript"></script>
        <script src="/assets/application.js?body=1" type="text/javascript"></script>
        <meta content="authenticity_token" name="csrf-param" />
        <meta content="vjtlRmIWqfBpHsTVEXKo85CwMsnzVJWmk3KBAg0WNRw=" name="csrf-token" />

      </meta>
    </meta>
  </head>
  <body class='home model'>
    <div class='navbar navbar-fixed-top'>
      <nav class='navbar-inner'>
        <div class='container'>
          <a href="/home/model" class="brand">Arcsite</a>
          <ul class='nav'>
            <li><a href="/companies">Companies</a></li>
            <li><a href="/workers">Workers</a></li>
            <li><a href="/locations">Locations</a></li>
            <li><a href="/certificates">Certificates</a></li>
            <li><a href="/tags">Tags</a></li>
            <li>
              <a href="/users/sign_out" data-method="delete" rel="nofollow">Logout</a>
            </li>
            <li>
              <a href="/users/edit">Edit account</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div id='main' role='main'>
      <div class='container'>
        <div id='demo_page_header'></div>
        <div class='content'>
          <div class='row'>
            <div class='span12'>

              <div class='row'>
                <div class='span' dispay='none' id='demo_flag'></div>
                <div class='span12'>
                  <script type="text/javascript">PrivatePub.sign({"server":"http://localhost:9292/faye/faye","timestamp":1383923315163,"channel":"/tracked_points/new","signature":"d50b7a8ef6ee1a3e65a1c6835f88c173b15cca2a"});</script>
                  <script type="text/javascript">PrivatePub.sign({"server":"http://localhost:9292/faye/faye","timestamp":1383923315163,"channel":"/tracked_points/group","signature":"d0f6e25ed08577bdcafbe2b5c36deff8fcb488d5"});</script>
                </div>
              </div>
              <div class='row'>
                <div class='span9'>
                  <div class='box' id='tabs-1'>
<div id='zoom_to_extent'>
                      <img alt="Reset-icon" src="/assets/reset-icon.png" />
                    </div>
                    <!-- /#replay_mode{ replay: 'off'} -->
                    <!-- /  replay mode -->
                  </div>
                </div>
                <div class='span3'>
                  <div class='demo-long-container'>
                    <div class='demo-widget-label'>
                      <h3>
                        <div id='muster_list_label'>
                          Muster List
                        </div>
                      </h3>
                    </div>
                    <div class='demo-list-container'>
                      <div id='chkbox'>
                        <input id="ml_sort_by_company" name="ml_sort_by_company" type="checkbox" value="1" />
                        Sort by Company
                      </div>
                      <div id='muster_list'></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='span3'>
                  <div class='demo-widget-container'>
                    <div class='demo-widget-label'>
                      <h3>Asset Profile</h3>
                    </div>
                    <div id='demo_info_box'></div>
                  </div>
                </div>
                <div class='span3'>
                  <div class='demo-widget-container'>
                    <div class='demo-widget-label'>
                      <h3>Widget 2</h3>
                    </div>
                    <div id='demo_info_box2'></div>
                  </div>
                </div>
                <div class='span3'>
                  <div class='demo-widget-container'>
                    <div class='demo-widget-label'>
                      <h3>Zone Analytics</h3>
                    </div>
                    <div id='demo_info_box3'>
                      <div id='time_in_zones_pie_chart'></div>
                    </div>
                  </div>
                </div>
                <div class='span3'>
                  <div class='demo-widget-container'>
                    <div class='demo-widget-label'>
                      <h3>Your Current Location</h3>
                    </div>
                    <div id='user_current_location'></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <footer></footer>
        </div>
      </div>
      <!-- ! end of .container -->
    </div>
    <!-- ! end of #main -->
  </body>
</html>

Upvotes: 1

Views: 1268

Answers (1)

Alex
Alex

Reputation: 11245

This is default browser behavior in Touch Events mode. If you don't need any drag-and-drop functionality just turn off it:

document.addEventListener('touchstart', function(event) {e.preventDefault()}, true)

OR

turn off Touch Events mode. Because click still works after touch event "phase":)

Upvotes: 2

Related Questions