jqueryui连接可排序列表以在拖动时激活悬停

时间:2015-04-23 19:51:58

标签: css jquery-ui

简而言之

当我拖动可排序对象时,我需要能够在悬停时激活菜单。这可能吗?

上下文:

我有一个由cssmenu驱动的导航菜单,它基本上采用列表项并将它们排列成一个漂亮干净的菜单结构。我想在导航菜单中连接列表,并能够使用jqueryui可排序连接列表重新排列元素。我可以让连接列表单独工作(在cssmenu之外)并在特定列表的一个菜单中。问题是当我尝试从一个菜单项拖动到另一个菜单项时,下拉菜单未被激活。

您可以在此小提琴看到,我可以在列表中的对象进行排序,但我能'吨激活下拉菜单,将其拖动到另一个列表(即从黄列表拖动到蓝色的列表或反之亦然):

http://jsfiddle.net/9j5wyoLn/

HTML

<div id='cssmenu'>
    <ul id='subNavElements'>
    <li class='active has-sub'><a href='#'><span>About Us</span></a>
        <ul id="sortable1" class="connectedSortable">
          <li class="">Item 1</li>
          <li class="">Item 2</li>
          <li class="">Item 3</li>
          <li class="">Item 4</li>
        </ul>
    </li>   
    <li class='active has-sub'><a href='#'><span>Articles</span></a>
        <ul id="sortable2" class="connectedSortable">
          <li class="">Article 1</li>
          <li class="">Article 2</li>
          <li class="">Article 3</li>
          <li class="">Article 4</li>
        </ul>
    </li>
    </ul>
</div>

JS

//make sortable
$(document).ready(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();

  });

css:小提琴处理(下面显示太多)

1 个答案:

答案 0 :(得分:0)

想出来......

我在css中添加了一个名为“openSaysMe”的类,它会对要显示的元素进行样式化。

$fName=$_POST['fName'];
$lName=$_POST['lName'];
$email=$_POST['email'];
$password=$_POST['password'];
$state=$_POST['state'];
$zip=$_POST['zip'];
$address1=$_POST['address1'];

Print"<h3>";
Print"<a href ='projectHome.php'>Store Home&nbsp;&nbsp;&nbsp;</a>";
Print"<a href ='createAccount.php'>Create an Account&nbsp;&nbsp;&nbsp;   </a>";
Print"<a href ='login.php'>Login&nbsp;&nbsp;&nbsp;</a>";
Print"<a href='BrowseCategories.php'>Browse Categories&nbsp;&nbsp;&nbsp; </a>";
Print"<a href='search.php'>Search for a book&nbsp;&nbsp;&nbsp; </a>";
Print"<a href='orders.php'>Orders&nbsp;&nbsp;&nbsp; </a>";
Print"<a href ='contactUs.php'>Contact Us&nbsp;&nbsp;&nbsp;</a>";
Print"<a href ='index.html'>Home(index)&nbsp;&nbsp;&nbsp;</a>";
Print"</h3>";


$query="insert into Customers(Email,Passwd,FirstName,LastName,Address1,ZipCode,State) VALUES ('$email','$password','$fName','$lName','$address1',$zip,'$state')";
mysql_query($query);

$query="select * from Customers where Email = '$email'";
$result=mysql_query($query);
$numOfRows=mysql_numrows($result);
if($numOfRows==1)
{
    print"An account with that email is already created..<a href ='createAccount.php'>Please enter a new account email.</a>";
    print"<a href ='createAccount.php'></a>";

}
else
{
    print"Account created.";
}


@mysql_close($connection);

然后我在对项目进行排序时添加了类,在排序完成后将类带走了。

    #cssmenu .openSaysMe {
      left: auto;
      top: 34px;
      opacity: 1;
    }

这是一个小提琴:http://jsfiddle.net/9j5wyoLn/2/