Skip to content
This repository has been archived by the owner on Apr 20, 2018. It is now read-only.

make dragndrop example work for a class not an ID. #694

Closed
laurencefass opened this issue May 6, 2015 · 4 comments
Closed

make dragndrop example work for a class not an ID. #694

laurencefass opened this issue May 6, 2015 · 4 comments

Comments

@laurencefass
Copy link

I'm trying to adapt the drag and drop to work for a class of divs not just an ID.
https://github.com/Reactive-Extensions/RxJS/blob/master/examples/dragndrop/dragndrop.html

simple changes to give the div a class nor an ID dont work and i lose ability to drag the element

3 simple changes:

HTML line 7 i.e.

Drag Me!

CSS line 1 i.e. .dragTarget { style attributes unchanged }
JS line 4 i.e var dragTarget = document.getElementsByClassName('dragTarget');

Im not skilled enough to know if this is a bug in RXJS or that the example is not generalised enough. The documentation on events suggests these changes should be sufficient.

@paulpdaniels
Copy link
Contributor

My first guess would be that the events 'mouseup' and 'mousedown' are not supported on an HTMLCollection, which is what getElementsByClassName() returns. You probably have to apply the observable to each item in the collection.

@laurencefass
Copy link
Author

theres an example here: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/events.md. suggests maybe it should work:

var result = document.getElementById('result');
var sources = document.querySelectorAll('div');

var source = Rx.Observable.fromEvent(sources, 'click');

var subscription = source.subscribe(function (e) {
result.innerHTML = e.clientX + ', ' + e.clientY;
});

mattpodwysocki added a commit that referenced this issue May 22, 2015
@mattpodwysocki
Copy link
Member

@laurencefass this was an easy fix as getElementsByClassName and getElementsByTagName return an HTMLCollection so we can detect this via Object.prototype.toString.call(el) === '[object HTMLCollection]';.

@laurencefass
Copy link
Author

thanks matt, when you say 'easy fix' do you mean you have fixed Rx core and that thegetElementsByClassName example will now just work?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants