Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
depredator
0 / 0 / 0
Регистрация: 28.01.2015
Сообщений: 3
#1

Drag and Drop текст и SVG - JavaScript

17.04.2015, 10:44. Просмотров 317. Ответов 0
Метки нет (Все метки)

Суть работы такова. Есть 3 элемента текста (красный, синий, зеленый). Нужно при клике на элемент установить его в нужный прямоугольник. Некоторые элементы могут повторяться в разных прямоугольниках. Нужно как то получить значения каждого прямоугольника после установки пользователем, что бы в конце узнать результат, правильно или не правильно было выполнено. Ну как это сделать я пока не знаю еще. И как ограничить только вставку элемента в прямоугольник ? Часть моей реализация и сам принцип можно посмотреть http://jsfiddle.net/1h8jcee7/10/. Подскажите как можно реализовать то что я хочу.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        <div id="training_1">
            <div id="drag-training_1" class="drag-element">
                <span id="production">Красный</span><br>
                <span id="marketing">Синий</span><br>
                <span id="using">Зеленый</span>
            </div>
            
            <svg width="640" height="430" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
                 <g>
                 
                  <rect x="24.5" y="94" width="209" height="50" id="svg_2" fill="#ffffff" stroke="#000000"/>
                  <rect x="24.5" y="224" width="209" height="50" fill="#ffffff" stroke="#000000" id="svg_3"/>
                  <rect x="263.5" y="225" width="209" height="50" fill="#ffffff" stroke="#000000" id="svg_4"/>
                  <rect stroke-dasharray="null" stroke="#000000" fill="#ffffff" id="svg_7" height="74" width="523.9999" y="357" x="24.50003"/>
                
                 </g>
            </svg>  
        </div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
document.querySelector('#drag-training_1').addEventListener('click', function(e){ 
 
    var el = document.getElementById(e.target.id).childNodes[0].nodeValue;
    var element = document.createElement('span');
    var text = document.createTextNode(el);
    element.appendChild(text);
    element.innerHTML += "<img src='image/delete.png' alt='(Удалить)' title='Видалити' onclick='rem(this);'>";
    
 
    element.style.position = 'absolute';
    element.style.cursor = 'pointer';
    moveAt(e, element);
    document.body.appendChild(element);
    element.style.zIndex = 1000; 
 
    document.onmousemove = function(e) {
        moveAt(e, element);
        //console.log(element.style.left);
    }
  
    element.onmouseup = function() {
        document.onmousemove = null;
        element.onmouseup = null;
    }
      
    element.ondragstart = function() {
        return true;
    };
 
});
 
    function moveAt(e,element) 
    {
        element.style.left = e.pageX - element.offsetWidth / 2 + 'px';
        element.style.top = e.pageY - element.offsetHeight / 2 + 'px';
        return element; 
    }   
    
    function rem(r)
    {
        r.parentNode.remove();
    }
удалить только не работает на jsfidle
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.04.2015, 10:44
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Drag and Drop текст и SVG (JavaScript):

Drag and drop
Помогите найти ошибку &lt;html&gt; &lt;head&gt; &lt;script&gt; var ball =...

Drag and Drop
вот нашёл примерчик в сети...

Drag&Drop
Есть таблица (много полей) Существует ли фреймворк для Drag&amp;Drop который по...

Drag and Drop в JavaScript
Здравствуйте!!!!!! Подскажите пожалуйста, какой-нибудь пример или книгу ил еще...

Drag and drop на форму
Подскажите пожалуйста, можно ли сделать так, чтобы при перетаскивании файла...

Простейший drag and drop
Почему, если переместить ползунок, а потом по нему кликнуть, то от перемешается...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
17.04.2015, 10:44
Привет! Вот еще темы с решениями:

Drag&Drop
Я хочу сделать интерфейс Drag and Drop. И вроде всё делаю правильно, но...

сохранение drag-and-drop
https://learn.javascript.ru/drag-and-drop-plus Существует метод сохранить...

Drag and drop и корзина
Добрый день! Подскажите пожалуйста, как сделать чтоб когда я беру предмет за...

drag-n-drop с таблицами
Добрый вечер. Возник такой вопрос: Есть текст в одном поле таблицы, надо его...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru