[英]jQuery sortable cannot click into input
嗨我正在使用jquery sortable和两个链表,我在这个列表中有输入字段,有时需要附加一个自定义URL。 但是由于某种原因,可排序函数禁用输入字段。
有谁知道如何解决这个问题?
我的代码在下面或查看jsFiddle
JS:
$(function() {
$( "#sortable1" ).sortable({
cancel: ".ui-state-disabled"
});
$( "#sortable2" ).sortable({
cancel: ".ui-state-disabled",
receive: function (event, ui) {
if (ui.item.hasClass("defaultbanner")) {
$(ui.sender).sortable('cancel');
alert("This banner is a default banner, it can be sorted but not removed.");
}
}
});
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
$( "#sortable1 li, #sortable2 li" ).disableSelection();
});
// no more than 7 banners allowed
$(function() {
$("#sortable1").sortable({
connectWith: '.connectedSortable',
//receive: This event is triggered when a
//connected sortable list has received an item from another list.
receive: function(event, ui) {
// so if > 7
if ($(this).children().length > 7) {
//ui.sender: will cancel the change.
//Useful in the 'receive' callback.
$(ui.sender).sortable('cancel');
alert('Your selection has been cancelled. Maximum 7 banners are allowed in the carousel.');
}
}
}).disableSelection();
});
HTML
<div class="container">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="banners_form">
<form method="post" action="preview-frame.php">
<div class="selectedbanners">
<h4> Selected Banners</h4>
<div class="fixedscroll">
<ul id="sortable1" class="inlinebanners connectedSortable ui-sortable">
<li class="ui-state-default ui-state-enabled bannerslist defaultbanner">
<div class="pic"><a href="#" class="banner"><img src="images/banners/slide1389020104.jpg" alt="Market Update"/></a>
<div class="cap">Banner One</div>
</div>
</li>
</ul>
</div>
</div>
<div class="availablebanners">
<h4>Available Banners</h4>
<div class="fixedscroll">
<ul id="sortable2" class="inlinebanners connectedSortable ui-sortable">
<li class="ui-state-default ui-state-enabled bannerslist">
<div class="pic">
<input type="hidden" name="banner[]" value="136344"><a href="#" class="banner"><img src="images/banners/slide1386152442.jpg" alt="2013 Autumn Statement report"/></a>
<div class="cap">Banner 2</div>
</div>
<label>Alternative URL:</label>
<input name="url[]" value="" size="44" style="width:100px;margin-top:3px;">
<br>
</li>
<li style="" class="ui-state-default ui-state-enabled bannerslist">
<div class="pic">
<input type="hidden" name="banner[]" value="135809"><a href="" class="banner"><img src="images/banners/slide1381918638.jpg" alt="View the Autumn 2013 e-Investor"/></a>
<div class="cap">View the Autumn 2013 e‑Investor</div>
</div>
<label>Alternative URL:</label>
<input name="url[]" value="" size="44" style="width:100px;margin-top:3px;">
<br>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
添加handle: ":not(input)"
作为#sortable1
和#sortable2
的sortable
方法的选项为我修复了它
不要使用disableSelection() 。
例如,代替: $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection();
写: $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.