2013-11-01 89 views
1

在演示模式下,當我在Mac OS X 10.8.5上玩Chrome(版本30.0.1599.101)時,觸摸屏啓用了電視,突然間我的div變得可拖動。我們還沒有通過jquery和HTML5規範啓用拖放功能,但不知何故,我們能夠拖動我們的div並將它們放置在屏幕的任何位置。我們可以旋轉並調整它們的大小。當我們刷新頁面時,此功能停止。任何想法如何這是可能的?Chrome Drag and Drop Divs

我們之前已經從開發工具中啓用了「仿真觸摸事件」,但是當此功能出現時,開發工具並未打開。此外,我們已經安裝,然後卸載Chrome MuliTouch擴展。

編輯

HTML頁面爲:

<!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="https://stackoverflow.com/users/sign_out" data-method="delete" rel="nofollow">Logout</a> 
      </li> 
      <li> 
       <a href="https://stackoverflow.com/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> 
+1

我不認爲這是可能的。無論如何你能分享這個頁面嗎? – clu3Less

回答

2

這在觸摸事件模式的默認瀏覽器的行爲。 如果您不需要任何拖和拖放功能只是關閉它:

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

OR

關閉觸摸事件模式。因爲觸摸事件「階段」後點擊仍然有效:) :)

+0

感謝您的信息,但我們實際上希望啓用此功能,而不是禁用。我將如何啓用觸摸事件模式? –

+0

'我們之前已經從開發工具中啓用了「仿真觸摸事件」這是「觸摸事件模式」。你可以添加代碼示例嗎? – Pinal

+0

這並沒有讓它回來,但花時間回答的賞金。謝謝 –