Sortable и вводимый текст

Dzib · March 30, 2013

Привет, всем. Мне нужно что б пользователь вводил текст в каждом элементе списка, нажимал кнопку, вводимые поля переставали быть редактируемые и что б элементы можно было двигать даже цепляя их за текст, проблема в том что для того что б манипулировать текстом приходится использовать либо form input либо text area и наводя курсор на них нельзя подвинуть элемент, есть у кого идеи? Спасибо за ответы.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
body{font:9pt Arial,sans-serif;}
.connectedSortable{list-style-type:none; margin:20px 20px 20px 20px; padding:0px 0px; width:320px; height:50px; background-color:#ddd; border: 4px double black;}
.connectedSortable li{float:left;margin:1px 1px 1px 1px; text-align:center; height:50px; width:100px; background-color:#fff; border:1px solid #888; display: table-cell; vertical-align:middle;}
#sortable4{height:110px}
</style>
<script type="text/javascript">
$(function() {

$( ".connectedSortable" ).sortable({
connectWith:".connectedSortable"

}).disableSelection()
});

function someFunc() {
var result1 = $( "#sortable1" ).sortable( "toArray" );
var result2 = $( "#sortable2" ).sortable( "toArray" );
var result3 = $( "#sortable3" ).sortable( "toArray" );
alert(result1+"</br>"+result2+"</br>"+result3);
}
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
</ul>
<ul id="sortable2" class="connectedSortable">
</ul>
<ul id="sortable3" class="connectedSortable">
</ul>

<ul id="sortable4" class="connectedSortable">
<li id="1">
<FORM>
<input id="txtForm1" class="txtPuzz" MAXLENGHT=7 VALUE="1">
</FORM>
</li>
<li id="2">
<FORM>
<input id="txtForm2" class="txtPuzz" MAXLENGHT=7 VALUE="2">
</FORM>
</li>
<li id="3">
<FORM>
<input id="txtForm3" class="txtPuzz" MAXLENGHT=7 VALUE="3">
</FORM>
</li>
<li id="4">
<FORM>
<input id="txtForm4" class="txtPuzz" MAXLENGHT=7 VALUE="4">
</FORM>
</li>
<li id="5">
<FORM>
<input id="txtForm5" class="txtPuzz" MAXLENGHT=7 VALUE="5">
</FORM>
</li>
<li id="6">
<FORM>
<input id="txtForm6" class="txtPuzz" MAXLENGHT=7 VALUE="6">
</FORM>
</li>
</ul>

<input type="button" name="Check" value=" Check " onclick="someFunc()" />
</body>
</html>

deadrash · March 30, 2013

Можно ставить тегу атрибут disabled="true", а по mouseup убирать его и давать фокус элементу.

rus · March 31, 2013

можно эмулировать input дивом, а данные будут в хиддене передаваться, ну и перетаскивать див можно будет наверное потом http://javascript.ru/ui/draganddrop

Dzib · March 31, 2013

Да див перетаскивается вместе с элементом списка, но как с него сделать полем для ввода текста юзером?

Edited March 31, 2013 by Dzib

rus · March 31, 2013

про кастомизацию слыхали?

Dzib · April 1, 2013

На сколько я понимаю вы имели введу что б я вот так сделал, но тогда всеровно не перетаскивается элемент, если потянуть за текст


<li id="1">
  <div id="some">
    <span>
      <input id="txtForm1" class="txtPuzz" MAXLENGHT=7 VALUE="1">
    </span>
  </div>
</li>

Edited April 1, 2013 by Dzib

rus · April 1, 2013

если потянуть за текст

мы видимо по разному понимаем значение этого выражения.

за сам текст потянуть нельзя в принципе (если конечно он не картинка), его можно только выделить, скопировать, изменить, удалить... а тянуть "потянуть" можно только за рамку\оболочку в которой находится текст.

deadrash · April 1, 2013

На сколько я понимаю вы имели введу что б я вот так сделал, но тогда всеровно не перетаскивается элемент, если потянуть за текст

А чем вам disabled="true" не подходит? В таком состоянии, как раз можно за текст тянуть.

Sign In

Sortable и вводимый текст

Question

Dzib

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

deadrash

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Dzib

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Dzib

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

deadrash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information