Мой первый перетаскивание, это работает, но лучше ли это? - PullRequest
Новая
       2

Мой первый перетаскивание, это работает, но лучше ли это?

1 голос
/ 28 декабря 2011

Я только начал изучать javascript и создал drag and drop, используя jquery draggable.

Демо здесь:

http://www.vwardv.com/doll6.html

Я не смог найти учебник, поэтому я просто зашел на сайт jquery и поиграл с адаптацией демо. Это работает, но я понятия не имею, кодировал ли я его так, как он должен быть на самом деле. Я был бы очень признателен, если бы вы могли сказать мне, если вы видите что-нибудь, что вы бы улучшили.

Вот код: 

<!doctype html>
<html lang="en">
<head>


<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>


<script>
$(function() {
    $( "#draggable" ).draggable()
});
</script>

<script>
$(function() {
    $( "#draggable2" ).draggable();
});
</script>

<script>
$(function() {
    $( "#draggable3" ).draggable();
});
</script>

<script>
$(function() {
    $( "#draggable4" ).draggable();
});
</script>

<script>
$(function() {
    $( "#draggable5" ).draggable();
});
</script>


</head>
</body>

<div id="bodies/palepd.gif">
<img src="bodies/palepd.gif" class="ui-widget-content" id="draggable">
<img src="bodies/trousers.gif" class="ui-widget-content" id="draggable2">
<img src="bodies/top.gif" class="ui-widget-content" id="draggable3">
<img src="bodies/dress.gif" class="ui-widget-content" id="draggable4">
<img src="bodies/coat.gif" class="ui-widget-content" id="draggable5">
</div>

Спасибо

Vic

обновление *

Спасибо за все ваши советы, я действительно ценю это. Теперь я скорректировал код в соответствии с вашим советом. Дайте мне знать, если я что-то не так понял или есть что-то еще, что я мог бы улучшить. Спасибо 

<!doctype html>
<html lang="en">
<head>


<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>


<script>
$(document).ready(function() {
    $( ".mydraggable" ).draggable();
});
</script>


</head>
<body>

<div id="items">
<img src="bodies/palepd.gif" class="mydraggable">
<img src="bodies/trousers.gif" class="mydraggable">
<img src="bodies/top.gif" class="mydraggable">
<img src="bodies/dress.gif" class="mydraggable">
<img src="bodies/coat.gif" class="mydraggable">
</div>


</body>

* обновление 2

Может кто-нибудь сказать мне, почему я должен использовать «ui-widget-content» вместо «mydraggble»?

Теперь мне нужно перейти к следующему этапу, который заключается в заказе предметов, так что, например, вы можете положить топ за куртку и т. Д.

Мне нужно будет добавить две кнопки на страницу: одна будет перемещать элемент вверх по слою / слоям, а другая - вниз по слою / слоям. Это, очевидно, будет означать, что мне понадобится встроить некоторые средства, указывающие, какой элемент выбран, для ясности. Кто-нибудь может указать мне правильное направление для обеих / любой из этих вещей?

Еще раз спасибо

Ответы [ 4 ]

1 голос
/ 28 декабря 2011

Я думаю, вы можете просто вызвать все объекты в одном селекторе jQuery: 

$('.ui-widget-content').draggable();
0 голосов
/ 28 декабря 2011

Первое, что бросается в глаза - это количество готовых обработчиков событий, которые у вас есть.Каждый экземпляр $(function() { ... является обработчиком событий готовности, который выполняется, когда DOM готов к манипулированию.

Нет необходимости иметь так много, когда этого достаточно: 

$(function() {
    $( "#draggable" ).draggable()
    $( "#draggable2" ).draggable();
    $( "#draggable3" ).draggable();
    $( "#draggable4" ).draggable();
});

Следующая проблема - пропущенная точка с запятой в первой строке тела функции.Хотя это не главная проблема, я всегда рекомендовал бы ставить точку с запятой в конце строки.Скорее всего, позже вы столкнетесь с запутанными проблемами.

Далее вы можете заменить эти 4 строки одной, намного более короткой.Поскольку все 4 элемента имеют общий класс, вы можете использовать селектор класса, чтобы сопоставить их все: 

$(function() {
    $(".ui-widget-content").draggable();
});

Кроме того, вы никогда не открываете элемент <body>, а только закрываете его.Измените </body> на <body> и закройте его в конце.

Наконец, когда в элементе <script> отсутствует атрибут src, должен присутствовать атрибут type.Поскольку вы пишете код JavaScript в этом элементе <script>, потребуется type из text/javascript.Другими проблемами с HTML-валидностью являются отсутствующий элемент <title> и отсутствующие атрибуты alt в элементах <img>.

В общем, я бы изменил ваш код следующим образом: 

<!doctype html>
<html lang="en">
<head>
    <title>Some title</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(".ui-widget-content").draggable();
        });
    </script>
</head>
<body>
    <div id="bodies/palepd.gif">
        <img src="bodies/palepd.gif" class="ui-widget-content">
        <img src="bodies/trousers.gif" class="ui-widget-content">
        <img src="bodies/top.gif" class="ui-widget-content">
        <img src="bodies/dress.gif" class="ui-widget-content">
        <img src="bodies/coat.gif" class="ui-widget-content">
    </div>
</body>
</html>
0 голосов
/ 28 декабря 2011

В основном хорошо:)

</body> должно быть <body>, затем закройте его и </html> в конце. 

<div id="bodies/palepd.gif">

Это недопустимый идентификатор.

Объедините все ваши встроенные скриптовые блоки в один блок: 

$(function() {
    $( "#draggable1, #draggable2, #draggable3, #draggable4, #draggable5" ).draggable();
});
0 голосов
/ 28 декабря 2011

Было бы лучше заменить эти 5 отдельных блоков сценариев на один: 

<script>
$(document).ready(function() {
  $( "#draggable, #draggable2, #draggable3, #draggable4, #draggable5" ).draggable()
});
</script>

Еще лучше было бы дать класс «mydraggable» каждому перетаскиваемому элементу на вашей странице, и они заменили вышеприведенное на: 

<script>
    $(document).ready(function() {
      $( ".mydraggable" ).draggable()
    });
</script>
...