2015-04-08 1 views
3

Я использую JQuery 2.1.3 и JQuery UI 1.11.4. Перетаскиваемый файл привязан к div с прокручиваемым контентом. Как только вы нажмете на полосу прокрутки, перетаскиваемая ручка прилипает к ней. Теперь нет способа выйти из режима перетаскивания. Это происходит только в IE.JQuery UI Draggable Div с прокручиваемыми палочками для мыши

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-animate.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
    <script src="script.js"></script> 

    </head> 

    <body> 
    <div ng-app="myApp"> 
     <div ng-controller="TodoCtrl"> 
     <button ng-click="foo()">Load Div</button> 
      <div id="floatingdiv" style="display:none;overflow-x:scroll;width:300px;height:400px;"> 
      <div style="width:1000px;height:1000px;border:1px solid black;">MY INNER DIV</div> 
      </div> 
     </div> 
    </div> 
    </body> 

</html> 

Javascript

var myAppModule = angular.module('myApp', []); 

myAppModule.controller("TodoCtrl",function($scope) {  
    $scope.foo = function() 
    { 
     $("#floatingdiv").show(); 
     $("#floatingdiv").draggable(); 
    } 
}); 
+0

какая версия IE вы тестируете? – Erick

+0

Это в IE 10 – Kathir

+1

какая версия пользовательского интерфейса jquery вы используете? IE9 + требует jQuery UI 1.8.6 или выше – Erick

ответ

3

Может быть такой же, как этот вопрос: jquery UI Draggable in IE10 bug when dragging by scroll bar

.draggable имеет свойство 'ручки', который можно передать класс/идентификатор и то только этот указанный раздел будет отвечать на перетаскивание. Вы хотите, чтобы раздел перетаскивания был отделен от любого элемента, который имеет IE переполнения b/c, является IE и не может справиться с этим. Раздел заголовка для элемента хорошо подходит для этого.

$('#floatingdiv').draggable({handle: '.draggableSection'}); 

Кроме того, это нехорошая практика иметь jQuery в контроллере, только голова.

+0

Это по крайней мере лучше, чем наличие прокрутки, торчащей с помощью перетаскивания. Это работает. – Kathir