开发者社区> 问答> 正文

sortable的偏移问题!!!

在chrome ff 和ie9上都可以正常的进行拖动,但是在IE6 7 8上从newslist2向newslist1拖动就会出错。。

先来源码

<span style="color:#e53333;">CSS</span> <style type="text/css">
        #newslist
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 850px;
        }
        #newslist li
        {
            margin: 0 3px 3px 3px;
            padding: 0.4em;
            padding-left: 1.5em;
            height: 18px;
            text-align: left;
        }
        #newslist li #icon1
        {
            position: absolute;
            margin-left: -1.3em;
        }
        #newslist li #icon2
        {
            position: absolute;
            margin-left: 50em;
            cursor: pointer;
        }
        #newsList2
        {
            list-style-type: none;
        }
        #newsList2 li
        {
            margin: 0 3px 3px 3px;
            padding: 0.4em;
            padding-left: 1.5em;
            height: 18px;
            text-align: left;
        }
        #newsList2 li #icon1
        {
            position: absolute;
            margin-left: -1.3em;
        }
        .newstype
        {
            border: solid 1px green;
            margin-bottom: 10px;
        }
        .newsfont
        {
            font-size: 14pt;
            font-weight: bold;
        }
    </style>

<span style="color:#e53333;">JQ </span> $("#newslist").sortable();
            $(".newstype").sortable();
            $("#newsList2").sortable();
            $("#newslist").sortable({ connectWith: '.newstype'});
            $(".newstype").sortable("option", "connectWith", '#newslist');
<span style="color:#e53333;">HTML</span> <UL id="newslist">
<li class="ui-state-default">哈哈哈哈</li>
<li class="ui-state-default">哈哈哈哈</li>
<li class="ui-state-default">哈哈哈哈</li>
<li class="ui-state-default">哈哈哈哈</li>
<li class="ui-state-default">哈哈哈哈</li>
</UL>
-------------------------------------------------------
 
<div id="newsList2" style="width: 850px; text-align: left; margin-top: 20px;">
               <div class="newstype" id="1">
                    <span class="newsfont">Reading Recommendation</span></div>
                <br />
                <div class="newstype" id="3">
                    <span class="newsfont">Legal Updates</span></div>
                <br />
                <div class="newstype" id="4">
                    <span class="newsfont">TAA Updates</span></div>
                <br />
                <div class="newstype" id="5">
                    <span class="newsfont">HR Updates</span></div>
                <br />
                <div class="newstype" id="2">
                    <span class="newsfont">Case Spotlight</span></div>
            </div>
            </div>

展开
收起
a123456678 2016-07-06 09:27:33 1980 0
1 条回答
写回答
取消 提交回答
  • screenshot

    2019-07-17 19:51:51
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载