jquery easyui slider 拖动报错

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery easyui slider 拖动报错相关的知识,希望对你有一定的参考价值。

我是在百度地图的地图弹窗去引用easyui的demo。因为之前,拼的字符串的html直接调用,获取不了easyui的样式。所以我换了一个方法。在弹窗内的代码层,我再次调用"jquery.easyui.min.js"这个js文件。确实,在弹窗以后有了样式效果。可是在做slider的时候,我测试发现,单点移动到某个位置是没问题的,但是只要一拖动,注意是拖动,马上报错了,报错是他自己的函数,我看了一下也看不太懂,大概是进了一个循环,而且好像死循环了,我想问下有没办法去解决。下面是引用的js的demo以及效果和报错的图片,快来大神啊!
对了,拖动后,你只要鼠标不点其他的地方,你鼠标往左移,上面滑动器的点就跟着左移,往右也一样。除非你点击外面的地方,否则根本停不下来。报错的话是报的是自己库里面的错,搞不掂啊。求大神

参考技术A 建议你如果添加了EasyUI的标签 然后没有生成对应的样式 你可以用EasyUI api中的解析器来解析一下你的 字符串标签

//这是我以前的一个例子

$("#point").click(function ()
var odiv = '<div class="easyui-accordion" style="width:300px" id="tt"><div title="项目管理">1111111111</div><div title="角色管理">2222222222</div></div>';
$("body").append(odiv);
$.parser.parse($("#tt").parent()); //$.parser.parse($("#tt")) 这样是不对的 因为这样只找到了 手风琴的两个子元素 而没有吧 class="easyui-accordion" 找到
);

希望对你有所帮助追问

我怎么感觉你回答的跟我的问的不一样,我问的是,你可看见我上面的图片,样式我已经加载出来了,我说了加载样式只是想说,我加载跟平时的不一样,让你们注意一下而已,主要不是样式问题

追答

我说的这个是根本上解决你的问题 换一种方式解决你的问题

你为什么要重新再加载一次easyui?
就是因为你没有了它的样式 所以你需要解析以下撒

你加载多次easyui.min.js 这个我也不知道你的each报错哪儿来的了

追问

你的意思是,我可能是重新加载多一次了这个js,所有才报的错?

追答

嗯 我是这样猜测的

我觉得实在找不出原因了 就可以换一种思路

因为你可能要跟踪它的源码 看看拖拽的哪儿是不是出问题了 或者其他的

追问

这样说,我加了其他两个控件是没问题的。然后,特么滑动器一拖就报那个each的错。但是点击移动就不会。我搞不懂了

本回答被提问者和网友采纳

可在 Slick-slider 中拖动的 jQuery UI

【中文标题】可在 Slick-slider 中拖动的 jQuery UI【英文标题】:jQuery UI draggable inside Slick-slider 【发布时间】:2015-04-08 18:16:04 【问题描述】:

我需要在Slick-slider 中有一个 jQuery UI 可拖动元素。我知道 jQuery UI 有句柄选项http://jqueryui.com/draggable/#handle,但我不确定如何将它应用到 slick-slider。

我发现了这个 SO 问题:jQuery UI Slider Interference with slick carousel 但它使用的是 jQuery UI 的 slider 选项。当我在示例中执行类似操作时,我能够禁用滑动滑块拖动...但是我的可拖动元素仍然不可拖动。

JSfiddle:http://jsfiddle.net/NateW/u1burczm/

当 Slick-slider 位于我的 draggable 元素之一中并且仍然可以拖动 draggable 元素时,如何禁用 Slick-slider 上的拖动?


HTML:

<div class="wrapper-slider">
  <div> 
    <div id="draggable" class="ui-widget-content">
      <p>Drag me around</p>
    </div>
    <div id="draggable" class="ui-widget-content">
      <p>and me!</p>
    </div>
  </div>
  <div><h3>1</h3><h3>1</h3><h3>1</h3></div>
  <div><h3>2</h3><h3>2</h3><h3>2</h3><h3>2</h3></div>
  <div><h3>3</h3><h3>3</h3></div>
</div>

JS:

$('.wrapper-slider').slick(
  dots: false,
  infinite: false,
  centerPadding: "20px",
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
);

$(function() 
    $( ".draggable-element" ).draggable();
  );

$(".draggable-element").on("draggable mouseenter mousedown",function(event)
    event.stopPropagation();
);

【问题讨论】:

这个运气好吗?我有同样的问题 不,很遗憾,我无法按照我想要的方式进行这项工作...:| 检查下面我添加的解决方案及其工作 @Sam,谢谢!它现在似乎工作得很好! 【参考方案1】:

为此,您需要在将 Draggble 绑定到元素之前取消绑定由 slick 滑块注册的 dragstart 事件,例如跟随。

$('.wrapper-slider').slick(
  dots: false,
  infinite: false,
  centerPadding: "20px",
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
);

$(function() 
    $('*[draggable!=true]','.slick-track').unbind('dragstart');
    $( ".draggable-element" ).draggable();
  );

$(".draggable-element").on("draggable mouseenter mousedown",function(event)
    event.stopPropagation();
);

这里正在工作 jsfiddle http://jsfiddle.net/samcoolone70/u1burczm/3/

【讨论】:

以上是关于jquery easyui slider 拖动报错的主要内容,如果未能解决你的问题,请参考以下文章

可在 Slick-slider 中拖动的 jQuery UI

jquery ui slider在移动端不能拖动,有没有简单快捷的方法处理,比如把slider转化为touch事件之类的

JQuery EasyUI---Draggable( 拖动) 组件

第一百九十三节,jQuery EasyUI,Draggable(拖动)组件

雷林鹏分享:jQuery EasyUI 拖放 - 基本的拖动和放置

将指针从一个点拖动到另一个点时,jQuery UI Slider 没有给出“滑动”效果